Question

我有一个由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>

Answer 1

您正在为innerHTML分配新值。

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

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

Answer 2

<!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>

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

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

2 个答案: