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块没有创建新范围，因此最后一个值会覆盖以前的值，您可以使用自调用函数：

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

http://jsfiddle.net/tx3s580a/

Answer 2

如未定义的答案所述，对于块，不会创建新的范围。

每次循环运行时，

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/

Answer 3

其他人回复的速度比我快，但是一旦你解决了问题，也要注意你的＆＃34; innerHTML＆＃34;可能无法正常使用IE（你的jsfiddle给出了一个＆＃34; SCRIPT600：此操作的目标元素无效＆＃34;在我的）！

JavaScript innerHTML is not working for IE?

Onclick在tr上没有按预期工作

3 个答案: