0

晚上好，我想从用户单击的行中获取所有数据，所以我尝试了这个脚本，它获取了行 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);

    }
        }
    }


}
4

2 回答 2

2

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

于 2013-03-06T14:09:29.090 回答
0

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

使用 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>
于 2013-03-06T14:59:30.513 回答