如何将表格单元格的 ID 发送到 javascript 中的 onclick function

Question

我正在动态创建一个 HTML 表，每个单元格都有一个 ID。 我想将 cell.id 发送到 onclick function，但我不知道该怎么做。

 window.onload = function() { myFunction(); } function myFunction() { var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.id = 'a' cell2.id = 'b' cell1.innerHTML = "cell1"; cell2.innerHTML = "cell2"; cell1.onclick = xfunc(cell1.id); cell2.onclick = xfunc(cell2.id); } function xfunc(id) { console.log('click', id) }

 <table id="myTable"></table>

使用此代码 function xfunc 似乎没有被调用。

另一方面，如果我使用

cell1.onclick=xfunc;

调用了 function，但是当然，我没有 cell.id。 我能做些什么？

Answer 1

您实际上是按照您现在的方式调用 function 。 有几种方法可以正确调用 function onclick。 第一个使用 addEventListener，第二个使用匿名 function。

添加事件监听器：

 window.onload = function() { myFunction(); } function myFunction() { var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.id = 'a' cell2.id = 'b' cell1.innerHTML = "cell1"; cell2.innerHTML = "cell2"; cell1.addEventListener('click', xfunc, false); cell2.addEventListener('click', xfunc, false); } function xfunc(evt) { console.log('click', evt.currentTarget.id) }

 <table id="myTable"></table>

匿名 function：

 window.onload = function() { myFunction(); } function myFunction() { var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.id = 'a' cell2.id = 'b' cell1.innerHTML = "cell1"; cell2.innerHTML = "cell2"; cell1.onclick = function(){xfunc(cell1.id)}; cell2.onclick = function(){xfunc(cell2.id)}; } function xfunc(id) { console.log('click', id) }

 <table id="myTable"></table>