Question

我是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>

Answer 1

这似乎是规范的方式

DEMO

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。我没有对此进行测试，但他的fiddle似乎有效。

Answer 2

我不太清楚为什么你在这里使用一个闭包，你会更精细一点吗？

您没有看到所需警报的原因是因为在onclick功能中，您正在返回另一个功能。即：

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

这样的东西不会真正起作用，因为你从不调用嵌套函数...不使用闭包尝试它，或者解释为什么你想要一个闭包，因为你的解释没有多大意义我

Answer 3

你只需删除一个额外的功能，脚本就像这样

<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>

用于添加表行onclick事件的JavaScript

3 个答案: