addEventListener 到指定的 html 表列事件传播/委托

Question

我有一个包含 10 列的表，我想通过使用特定addEventListener语句将一个或多个事件侦听器添加到第 5 列到第 8 列（因此请不要使用诸如 之类的内联事件element.onclick）。该表是动态的，事实上，我在编程时不知道该表在运行时将有多少条记录，因为它只会在那一刻填充数据。

我已经知道如何“瞄准”表格或表格行或指定的表格单元格以向其添加事件侦听器，但不幸的是我不明白如何将它们一次添加到某些列或一系列列（“一次”是指一个 for 循环，循环遍历每一行以获得每行所需的单元格）。

编辑

该表只是一个普通的表，如下例所示，它是通过从 csv 文件加载数据记录或通过放置在表本身的 tfoot 中的表单添加新记录来填充的。此外，由于 js 在需要时动态添加（或删除）的属性，因此可以将数据编辑到表本身中contenteditable。

如果我想向行添加事件侦听器，我首先获取行对象，然后将事件侦听器添加到其中一次：由于事件传播/委托，所有 td 元素都将根据我的需要受到影响。是否可以对列执行相同的操作？

myRow.addEventListener(input, myfunc, false);

换句话说，是否可以执行以下操作：

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);

myRow.addEventListener(input, myfunc, false);

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);

Answer 1

可以window.event.target.cellIndex获取单击的单元格的单元格索引（从 0 到 n，其中 n 是表列数 - 1），即列索引。

可以window.event.target.parentNode.rowIndex获取单击的单元格的行索引（从 0 到 n，其中 n 是表行数 - 1），即行/记录索引。

例子：

  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;

工作示例：

  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;

document.getElementById('myTbl').addEventListener('click', function(){myFunction(event)}, false);

function myFunction()
{
  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;
  alert('Col index is: ' + col + '\nRow index is: ' + row);
  
  // At this point it is easy to do something like:
  // if(col > 5 && col < 8)
  {
    //Execute this stuff 
  }
}

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