Onclick doesn't work as expected on tr

Onclick doesn't work as expected on tr

本文关键字：as expected on tr work doesn Onclick      更新时间：2023-09-26

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

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

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

http://jsfiddle.net/tx3s580a/

正如undefined的答案中所提到的，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/

其他人的回复比我快，但一旦你解决了你的问题，也要注意你的"innerHTML"可能无法正确使用IE（你的jsfiddle给出了"SCRIPT600:此操作的目标元素无效"）！

JavaScript innerHTML不适用于IE？

相关文章：