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 に答える