向表格行添加 onclick 事件

IT技术 javascript html dom dom-events
2021-01-31 20:29:06

我正在尝试通过 Javascript 向表行添加 onclick 事件。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

这在 Firefox 中按预期工作，但在 Internet Explorer (IE8) 中我无法访问表格单元格。我相信这与 onclick 函数中的“this”被标识为“Window”而不是“Table”（或类似的东西）有某种关系。

如果我可以访问当前行，我可以getElementById在 onclick 函数中执行 a我找不到方法来做到这一点。有什么建议？

6个回答

像这样的东西。

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

编辑

工作演示。

它有效，但是当我看到您的解决方案时，它与现在有点不同...... =P 我真的很感激，整个下午都在敲我的头！
2021-03-21 20:29:06
是的，我在发布答案后立即意识到这一点（就像 redsquare 所做的那样），后来更正了它。
2021-03-22 20:29:06
为什么需要 table.rows[i]？我试过 'var currentRow = rows[i]' 并且它起作用了。
2021-03-31 20:29:06
一直在寻找这个谢谢.. 编辑：我收到一个错误WHte.js:3 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null。我认为这是因为我动态加载行？因此没有“TR”。我该如何解决？？？
2021-04-04 20:29:06
你确定吗？它确实有效。检查我更新的答案中的工作演示链接。此外，在您的代码中，您从 1 而不是 0 开始索引。您不会将处理程序附加到第一行。
2021-04-05 20:29:06

我认为对于 IE，您将需要使用Event 对象的 srcElement 属性。如果 jQuery 是您的一个选择，您可能需要考虑使用它 - 因为它为您抽象了大多数浏览器差异。示例jQuery：

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});

简单的方法是生成如下代码：

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>

这是@redsquare 和@SolutionYogi 上面讨论的相同纯Javascript（不是 jQuery）解决方案的紧凑且更简洁的版本（重新：向onclick所有 HTML 表行添加事件处理程序），适用于所有主要 Web 浏览器，包括最新的IE11：

function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();

工作演示

注意：为了使它也能在 IE8 中工作，请this使用function(myrow)@redsquare 建议的显式标识符代替指针。最好的祝福，

头卡在 jq 太久了。这将起作用。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}
确实如此！每天给我一个
2021-03-18 20:29:06
我知道，jQuery 使所有这些事情变得如此简单，当您没有 jQuery 时，您会犯所有愚蠢的错误！:)
2021-03-22 20:29:06
这行得通吗？我发布了相同的示例，但我认为 onlcick 中的“行”将始终指最后一行。不是吗？[JavaScript 只有函数作用域，没有块作用域。]
2021-04-09 20:29:06
其它你可能感兴趣的问题
上一篇在特定坐标处触发 JavaScript click() 事件 下一篇从 Cloud Functions for Firebase 中的数据库触发器获取用户 ID？