如何为每个按钮没有唯一ID的按钮表设置EventListener？

Question

我正在尝试制作战舰游戏，该表由10行10列按钮组成，每个按钮没有唯一ID

<table id="myTable">
      <tr >
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
      </tr>
      <tr >
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
      </tr>
    <!-- it's quite longer-->
</table>

当点击任何按钮时获取单元格的坐标，我做了这个，但我回来了

table.addEventListener("click",function(){
    let col=this.closest('td').index();
    let row=col.closest('tr').index();
    shot([row,col]);
});

但是控制台会为此关键字抛出typeError

未捕获的TypeError：无法读取null的属性'index'

Answer 1

看起来你正在使用jquery。 （js中没有索引方法）尝试使用目标事件

table.addEventListener("click",function(event){
    let col= $(event.target).closest('td').index();
    let row= $(event.target).closest('tr').index();
    shot([row,col]);
});

also needs to check if target event is td or tr which you need

Answer 2

首先，我相信你误解了closest方法。 closest返回最近的祖先，而不是子，它相对于html层次结构而不是鼠标位置（mdn）。

其次，最简单的方法是向单个单元格添加事件侦听器：

[...table.querySelectorAll('tr')].forEach((row, rowI) =>
    [...row.querySelectorAll('td')].forEach((cell, colI) =>
        cell.addEventListener("click", () => shot([rowI, colI]))));

Answer 3

您可以使用表id和querySelectorAll获取所有按钮。最接近tr＆td的ise然后使用cellIndex和rowIndex

document.getElementById('myTable').querySelectorAll('button').forEach((item) => {
  item.addEventListener('click', function(e) {
    let td = item.closest('td').cellIndex ;
    let tr = item.closest('tr').rowIndex;
    console.log(tr, td)
  })
})

<table id="myTable">
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
</table>

Answer 4

如果仅使用DOM API，则必须自己计算索引。

    document.querySelector('#myTable').addEventListener("click", function (e) {
        let tr = e.target.closest('tr');
        let td = e.target.closest('td');
        let col = Array.from(tr.children).indexOf(td);
        let row = Array.from(this.rows).indexOf(tr);
        alert([row, col]);
    });

Answer 5

最近我发现了这个

table.addEventListener("click",function(e){
  let ele=e.target.closest('td');
  let cIndex=ele.cellIndex;
  let rIndex=ele.parentElement.rowIndex;
  shot([rIndex,cIndex]);
});