Onclick 在 tr 上无法按预期工作答案

【问题标题】：Onclick doesn't work as expected on trOnclick 在 tr 上无法按预期工作
【发布时间】：2014-10-20 15:28:57
【问题描述】：

我正在尝试使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";
  };
}

【问题讨论】：

标签： javascript onclick html-table

【解决方案1】：

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

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

http://jsfiddle.net/tx3s580a/

【讨论】：

效果很好！谢谢你。非常感谢您的帮助。

【解决方案2】：

如未定义的答案中所述，for block 不会创建新范围。

line 每次循环运行时都会更改。请改用this...

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(){
        this.innerHTML = "Row clicked...";
    };
}

http://jsfiddle.net/a9xf0nz2/

【讨论】：

【解决方案3】：

其他人的回复比我快，但是一旦你解决了你的问题，还要注意你的“innerHTML”可能无法在 IE 上正常工作（你的 jsfiddle 给出了一个 “SCRIPT600：此操作的目标元素无效”在我的）！

JavaScript innerHTML is not working for IE?

【讨论】：