javascript - Onclick 在 tr 上没有按预期工作

Question

我试图让 onclick 事件适用于表格的所有行。但是，无论我单击哪一行，该事件似乎只在最后一个 tr 时触发。我做了一个简单的例子来说明 JSFiddle 上的问题.

HTML:

<table>
  <tr>
    <td>Test</td>
    <td>Test2</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test2</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test2</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test2</td>
  </tr>
</table>

Javascript:

var table = document.getElementsByTagName( "table" )[0];
for( var contador = 0; contador < table.getElementsByTagName( "tr" ).length; contador++ ){
  var line = table.getElementsByTagName( "tr" )[contador];
  line.onclick = function() {
    line.innerHTML = "Row clicked";
  };
}

Answer 1

这是一个作用域问题，for block 不会创建新的作用域，所以最后一个值会覆盖以前的值，您可以使用自调用函数:

(function (line) {
    line.onclick = function () {
        //line.innerHTML = "Row clicked";
        line.cells[0].textContent = "Row clicked";
     };
})(table.getElementsByTagName("tr")[contador]);

http://jsfiddle.net/tx3s580a/