为多个表设置单击事件处理程序

Question

我正在制作一个测试站点，其中将显示 4 个表格(表格：A、B、C 和 D(。用户将能够单击任何表格行并在警报框中查看一条信息(目前(。我正在努力为这些表设置单击事件。例如，我需要单击两次才能触发单击事件并显示警报框，这在每个表中都会发生。

这就是我设置逻辑的方式：

<!--Table A-->
<table id="table-A" class="table table-striped table-sm">
<thead>
<tr>
Table 1
</tr>
</thead>
<tbody>
<tr>
<td onclick="AddRowHandler('table-A')">
Info 1
</td>
</tr>
<tr>
<td onclick="AddRowHandler('table-A')">
Info 2
</td>
</tr>
<tr>
<td onclick="AddRowHandler('table-A')">
Info 3
</td>
</tr>
</tbody>
</table>
...Same structure for tables B, C and D...
<script>
function AddRowHandler(tableID){
var table = document.getElementById(tableID);
var rows = table.getElementsByTagName("tr");
for (i = 1; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function (row) {
return function () {
var cell = row.id;
alert(cell + " was clicked!");
};
};
};
currentRow.onclick = createClickHandler(currentRow);
}
</script>

我的问题是，如何正确设置点击事件，是否有更有效的方法？最后一个想法源于添加更多表格的可能性。

Answer 1

您最好在trs 上添加单击处理程序并获取textContent(我假设只有tds 中的数据(。

var el =  document.getElementById("data")
function AddRowHandler(ref){
el.textContent = ref.textContent
}

#data{
padding : 20px;
border: solid 1px;
}

<table id="table-A" class="table table-striped table-sm">
<thead>
<tr>
Table 1
</tr>
</thead>
<tbody>
<tr onclick="AddRowHandler(this)">
<td >
Info 1
</td>
<td >
Info 2
</td>
</tr>
<tr onclick="AddRowHandler(this)">
<td >
Info 2
</td>
</tr>
<tr onclick="AddRowHandler(this)">
<td>
Info 3
</td>
</tr>
</tbody>
</table>

<div id="data"></div>