Как получить ячейки (<td>) координаты x и y в таблице с помощью jQuery?

Я ищу хороший способ получить ячейку X-Y в таблице. (не путайте его с помощью css-позиции, я ищу координату X и Y в декартовой системе координат).

Как известно, мы можем получить конкретную ячейку в таблице, используя ex: $('#grid')[0].rows[5].cells[7].

Но, если я хочу получить значение 5x7, когда я нажимаю на определенную ячейку, то есть:

$('#grid td').click(function(){
   alert("My position in table is: " + myPosition.X + "x" + myPosition.Y);
});

Я думаю, самый простой способ - добавить класс innerHTML, ID или CSS в каждую ячейку (<td class="p-5x7"> и т.д.) при создании таблицы в конце, затем проанализировать ее и вернуться по клику, но есть ли какие-либо способ получить эти координаты, основанные исключительно на DOM?

Ответ 1

DOM Уровень 2 HTML cellIndex:

alert('My position in table is: '+this.cellIndex+'x'+this.parentNode.rowIndex);

Ответ 2

window.onload = function () {
  document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
    alert("My position in table is: " + e.target.parentElement.rowIndex + "x " + e.target.cellIndex + "y");
  }, false);
}

tr, td {
  padding: 0.6rem;
  border: 1px solid black
}

table:hover {
  cursor: pointer;
}

<table id="grid">
  <tr>
    <td>0, 0</td>
    <td>0, 1</td>
    <td>0, 2</td>
  </tr>
  <tr>
    <td>1, 0</td>
    <td>1, 1</td>
    <td>1, 2</td>
  </tr>
</table>