如何使用 javascript 将 onclick 事件添加到表格单元格？ [复制]答案

【问题标题】：How to add a onclick event to a table cell using javascript? [duplicate]如何使用 javascript 将 onclick 事件添加到表格单元格？ [复制]
【发布时间】：2018-12-28 16:44:25
【问题描述】：

我正在使用 JavaScript insertRow 方法向现有表添加行对于一个单元格，我想添加一个onclick 事件。

如何使用纯 JavaScript 做到这一点？

我正在附上我的代码。

<!DOCTYPE html>
<html>
    <head>
        <style>
        table, td {
          border: 1px solid black;
        }
        </style>
    </head>
    <body>    
        <table id="myTable">
          <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
          </tr>

        </table>
        <br>
        <button onclick="myFunction()">Try it</button>
        <script>
        function myFunction() {
          var table = document.getElementById("myTable");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          cell1.innerHTML = "NEW CELL1";
          cell2.innerHTML = "NEW CELL2";
          cell1.onclick()="xfunc()";
        }

        function xfunc(){
        alert("Hi")
        }
        </script>
  </body>
</html>

【问题讨论】：

您可以在link找到您的解决方案

标签： javascript html

【解决方案1】：

onclick 是一个 html 属性，你已经为这个属性分配了一个函数来处理点击事件。

在你的情况下：

cell1.onclick = xfunc; // instead of cell1.onclick()="xfunc()";

【讨论】：

【解决方案2】：

如下更新你的函数

   <script>
        function myFunction() {
          var table = document.getElementById("myTable");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          cell1.innerHTML = "NEW CELL1";
          cell2.innerHTML = "NEW CELL2";
          cell1.onclick=xfunc;
        }

        function xfunc(){
        alert("Hi")
        }
        </script>

【讨论】：

【解决方案3】：

使用下面的。

cell1.addEventListener('click', xfunc);

【讨论】：

【解决方案4】：

首先你可以尝试一些非常简单的东西：

cell1.setAttribute('onclick', 'xfunc()');

也许这已经解决了您的问题。如果不是，您可以在单元格内使用 DIV：

var div = document.createElement('div');
div.setAttribute('onclick', 'xfunc()');
div.setAttribute('style', 'height: 100%; width: 100%');
div.innerHTML = 'NEW CELL1';
cell1.appendChild(div);

这应该可以解决问题。

我唯一不确定的是表格单元是否能够点击属性:)

LG

【讨论】：

【解决方案5】：

我认为问题在于，您如何将事件附加到cell1？试试下面的代码：

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell1.onclick = xfunc; //<-- problem was on this line
}

【讨论】：