Question

晚上好，我想从用户点击的行中获取所有数据，所以我尝试了这个脚本，它获取了行ID，但它没有得到该行中的数据，我推送每个数据在该行中的数组以供进一步使用：

    function findRowNumber() {
    var rowIdx;
    var rowData = new Array();
    var table = document.getElementById('product_table');
    var rows = table.getElementsByTagName('tr');
    var selectedRow;
    var rowCellValue;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            rowIdx = this.rowIndex;
            selectedRow = rows[rowIdx];
            for (j = 1; j < selectedRow.length; j++) {  // it doesn't enter that loop
        rowCellValue = selectedRow.cells[j].value;
        rowData.push(rowCellValue);
        alert("Value " + rowCellValue);

    }
        }
    }


}

Answer 1

selectedRow在您单击该行后填充，而您尝试在绑定单击处理程序之后但在实际单击之前循环它。您必须在单击处理程序中移动该代码

Answer 2

如果单元格中的数据是文本，

使用textContent（或innerText）检索可能更简单。

<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
<style>
table{border:3px ridge #c0c0c0;border-collapse:collapse;}
th, td{border:1px solid black}
</style>

<script>    
function findRowNumber(){
    var rowIdx;
    var rowData= [];
    var table= document.getElementById('product_table');
    var rows= table.getElementsByTagName('tr');
    var selectedRow;
    var rowCellValue;
    for(i= 0;i<rows.length;i++){
        rows[i].onclick= function(){
            rowIdx= this.rowIndex;
            selectedRow= this.cells;
            for(j= 0;j<selectedRow.length;j++){
                rowCellValue= selectedRow[j].textContent ||
                selectedRow[j].innerText;
                rowData.push('cell '+j+': '+rowCellValue);
            }
            alert("Row #" +rowIdx+'. '+ rowData);
        }
    }
}    
</script>
</head>
<body>
<h1> Retrieve Row Data</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "findRowNumber()">
Click to initialize</button> </p>

<table id="product_table" style="width:300px">
<tbody>
<tr> <td> a</td> <td> 1</td> </tr>
<tr> <td> b</td> <td> 2</td> </tr>
<tr> <td> c</td> <td> 3</td> </tr>
<tr> <td> d</td> <td> 4</td> </tr>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>

JavaScript获取单击行的数据

2 个答案: