将 onclick 事件添加到表中的每一行答案

【问题标题】：Add onclick event to each row in a table将 onclick 事件添加到表中的每一行
【发布时间】：2017-02-08 04:28:33
【问题描述】：

我有一个由 js 动态生成的 HTML 表格，我想为每一行添加一个 onClick 事件。
像这样
（因为在我的原始代码中需要传递复杂的参数，所以我使用Javascript添加了onclick功能）：

<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
    <thead>
        <th>Text</th>
        <th>MoreText</th>
        <th>Lorem</th>
        <th>Ipsum</th>
    </thead>
</table>
<br />


<script type="text/javascript">
    for (var i = 0; i < 4; i++) {
        document.getElementById("tableID").innerHTML += '<tr><td>Text</td><td>MoreText</td><td>Lorem</td><td>Ipsum</td></tr>';

        document.getElementById("tableID").rows[i+1].onclick = function () {
            alert("Hello World");
            //alert(i);
        };
    }
</script>
</body>
</html>

如果表格行是固定的并在 HTML 文档中声明，使用此方法是有效的，
但在我的代码（动态生成的表格行）中，onClick 函数仅适用于最后一行。

我猜这可能是异步问题，但我无法弄清楚。

更新
根据@Quentin 的方法，我编辑了我的代码。它工作正常。

<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
    <thead>
        <th>Text</th>
        <th>MoreText</th>
        <th>Lorem</th>
        <th>Ipsum</th>
    </thead>
</table>
<br />

<script type="text/javascript">
    for (var i = 0; i < 4; i++) {
        var table = document.getElementById('tableID');

        var tr = document.createElement('tr');
        tr.onclick = function () {
            alert("Hello World");
        };

        var td1 = document.createElement('td');
        td1.innerText = "Text";
        var td2 = document.createElement('td');
        td2.innerText = "MoreText";
        var td3 = document.createElement('td');
        td3.innerText = "Lorem";
        var td4 = document.createElement('td');
        td4.innerText = "Ipsum";

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);

        table.appendChild(tr);
    }
</script>
</body>
</html>

【问题讨论】：

标签： javascript html onclick html-table

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<style>
  table td { cursor: pointer; border: 1px solid black; }  
  #out { color: red; }
</style>
</head>
<body>
<table id="tableID">
  <thead>
      <th>Text</th>
      <th>MoreText</th>
      <th>Lorem</th>
      <th>Ipsum</th>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="out"></div>

<script type="text/javascript">
  function createCell(i, row, text) {
    var td = document.createElement('td');
    var content = document.createTextNode(text + i);
    td.appendChild(content);
    td.addEventListener('click', function() { document.getElementById('out').innerHTML = 'You clicked ' + this.innerHTML; }, false);
    row.appendChild(td);
  }

  for (var i = 0; i < 4; i++) {
    var tr = document.createElement('tr');
    createCell(i, tr, 'a');
    createCell(i, tr, 'b');
    createCell(i, tr, 'c');
    createCell(i, tr, 'd');

    document.querySelectorAll('#tableID tbody')[0].appendChild(tr);
  }
</script>
</body>
</html>

这应该可行，请参阅演示：http://jsbin.com/lucequgotu

【讨论】：

【解决方案2】：

您正在为innerHTML 分配一个新值。

这会删除所有现有的 DOM 元素和附加到它们的事件处理程序并创建新的（但您没有任何代码来重新创建要删除的事件处理程序）。

不要使用innerHTML。使用标准 DOM 方法：createElement、appendChild 等。然后您可以将新行添加到表体中，而无需更改已经存在的内容。

【讨论】：

感谢您解释代码的工作原理。我更改了我的代码，它工作正常。