javascript - 如何将侦听器添加到表列

Question

我想将侦听器添加到html表列中，这样当我单击所谓的可视化table column时，我想使用js. 考虑一下：

<table>
    <thead>
        <tr>
            <th>name</th>
            <th>lastname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Guga</td>
            <td>Nemsitsveridze</td>
        </tr>
        <tr>
            <td>Giorgi</td>
            <td>Beshidze</td>
        </tr>
    </tbody>
</table>

现在，当我单击lastname单元格（我的意思是以下元素之一：、、、<th>lastname</th>）时<td>Nemsitsveridze</td>，<td>Beshidze</td>我想使用js.

class我正在考虑的解决方案是为单元格的每个元素 分配某种属性并独立lastname添加相同的属性event listener，但我不确定它是否是解决此问题的唯一方法。

如果有人知道如何实现这一目标，请回答问题。

提前致谢。

标签： javascripthtml

Answer 1

为了在单击列时执行某些操作，您可以向整个表添加一个事件侦听器，然后检查单击了哪一列，然后执行一些代码。

使用window.event.target.cellIndex您可以访问单元格索引。

使用window.event.target.parentNode.rowIndex您可以访问行索引。

document.getElementById('myTbl').addEventListener('click', function(event) 

{
  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;
  if (col==1){
        alert('Col index is: ' + col + '\nRow index is: ' + row);
  }
});

table, td {
    border: 1px solid black;
}

<table id="myTbl">
    <thead>
        <tr>
            <th>name</th>
            <th>lastname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Guga</td>
            <td>Nemsitsveridze</td>
        </tr>
        <tr>
            <td>Giorgi</td>
            <td>Beshidze</td>
        </tr>
    </tbody>
</table>