Как установить EventListener для таблицы кнопок без уникального идентификатора для каждой?

Question

Я пытаюсь сделать игру на линкоре, таблица состоит из 10 строк и 10 столбцов кнопок без уникального идентификатора для каждого

<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 для этого ключевого слова

Uncaught TypeError: Невозможно прочитать свойство 'index' из null

Answer 1

Похоже, вы используете jquery.(в js нет метода index) попробуйте использовать целевое событие

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

также необходимо проверить, является ли целевое событие td или tr, которое вам нужно

Answer 2

недавно я узнал это

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

Answer 3

Если вы используете только 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 4

Вы можете получить все кнопки, используя таблицы id и querySelectorAll.Наименьшее, чтобы получить tr & td и затем использовать 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 5

Во-первых, я считаю, что вы неправильно понимаете метод closest. closest возвращает ближайшего предка , не дочернего, и оно относится к иерархии html, а не к позиции мыши ( mdn ).

Во-вторых, проще всего было бы добавить прослушиватели событий в отдельные ячейки:

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