2

私はJavascriptを初めて使用します。onclickイベントをテーブルの行に追加したいと思います。私はJQueryを使用していません。

行をループし、クロージャーを使用して、各行の外部関数の状態を確認します。ループは機能します。アラートを使用すると、反復ごとに関数が割り当てられていることがわかります。しかし、行をクリックしてもアラートは表示されません。以下は、ロードできるHTMLとコードです。

テーブル行イベントが機能しないのはなぜですか？

<!doctype html>
<html lang="en">
<body>
<script>
function example4() {
    var table = document.getElementById("tableid4");
    var rows = table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        var curRow = table.rows[i];
        //get cell data from first col of row
        var cell = curRow.getElementsByTagName("td")[0];
        curRow.onclick = function() {
            return function() {
                alert("row " + i + " data="+ cell.innerHTML);
            };
        };
    }
}
function init() { example4(); }
window.onload = init;   
</script>
<div>
Use loop to assign onclick handler for each table row in DOM. Uses Closure.
    <table id="tableid4" border=1>
      <tbody>
        <tr><td>Item one</td></tr>
        <tr><td>Item two</td></tr>
        <tr><td>Item three</td></tr>
      </tbody>
    </table>
</div>
</body>
</html>
4

3 に答える 3

9

これは標準的な方法のようです

デモ

function example4() {
    var table = document.getElementById("tableid4");
    var rows = table.rows; // or table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = (function() { // closure
            var cnt = i; // save the counter to use in the function
            return function() {
              alert("row"+cnt+" data="+this.cells[0].innerHTML);
            }    
        })(i);
    }
}
window.onload = function() { example4(); }​

更新：@ParkerSuperstarは、（i）のiは不要であることを示唆しました。私はこれをテストしていませんが、彼のフィドルは機能しているようです。

于 2012-12-26T18:04:47.747 に答える
1

ここでクロージャを使用している理由がよくわかりませんが、もう少し詳しく教えていただけますか？

目的のアラートが表示されない理由は、onclick関数内で、別の関数を返しているためです。すなわち：

window.onload = function() {
    return function() {
        alert("Closure... why?");
    };
};

ネストされた関数を呼び出さないため、このようなものは実際には機能しません...クロージャを使用せずに試してみるか、説明があまり意味をなさなかったためにクロージャが必要な理由を説明するコメントを付けてください。

于 2012-12-26T18:03:23.947 に答える
0

余分な関数を削除するだけで、スクリプトは次のようになります

<script>
 function example4() {
    var table = document.getElementById("tableid4");
cells = table.getElementsByTagName('td');

 for (var i=0,len=cells.length; i<len; i++){
 cells[i].onclick = function(){
    alert(this.innerHTML);

}
 }
}
 function init() { example4(); }
 window.onload = init;   
 </script>
于 2012-12-26T18:10:19.633 に答える