Получить координаты ячейки из <table>

[Пупел]

Имеется таблица на чистом php
Хочу получить координаты ячейки по нажатию на нее в окне браузера.
Получается решить этот вопрос только двумя функциями, каждая из которых отдельно получает координаты строки и столбца.
Необходимо реализовать получение координат с помощью одной функции.
Когда пытаюсь объединить функции в одну, не получаю значение второй координаты
Я только начинаю делать первые шаги, но есть догадки, что при onclick функция не получает второй параметр
Пример кода:

<table border="1">
  <tr onclick="myPositionY(this)">
    <td width="20" height="20" onclick="myPositionX(this)"></td>
    <td width="20" height="20" onclick="myPositionX(this)"></td>
  </tr>

function myPositionX(x) {
	alert("Координаты X: " + x.cellIndex);
}
function myPositionY(y) {
	alert("Координаты Y: " + y.rowIndex);
}

Помогите доступным языком разобраться чайнику

[Nexus]

<table border="1">
  <tr id="row">
    <td width="20" height="20"></td>
    <td width="20" height="20"></td>
  </tr>
</table>
<script>
function myPosition() {
	alert("Координаты X: " + this.cellIndex);
	alert("Координаты Y: " + this.parentNode.rowIndex);
}

[].forEach.call(row.querySelectorAll('td'),node=>node.onclick=myPosition);
</script>

[Malleys]

О странной приставке, которая кочует из одного ответа в другой...

[].forEach.call(row.querySelectorAll('td'),node=>node.onclick=myPosition);

Для каждого элемента из пустого массива в контексте... Я не понимаю, зачем такое сложное для понимания перечисление нужно продвигать во многих ответах на этом форуме. Вот это странное [].forEach.call можно спокойно заменить на Array.from.

Array.from(row.querySelectorAll('td')).forEach(node=>node.onclick=myPosition);

Перечисление ещё можно(и даже грамотней с точки зрения JavaScript) организовать вот так...

for(const node of row.querySelectorAll('td')) {
    node.onclick=myPosition;
}

[рони]

Array.from

если не нужен ie < 12

[рони]

или так

[...row.querySelectorAll('td')].forEach()

[MallSerg]

На вкус все фломастеры разные =). ИМХО любой работающий вариант достоин права на жизнь.
Но вещать обработчик на каждую ячейку это уже слишком. Думаю разумнее воспользоватся всплытием событий и повесить один обработчик на таблицу.

[рони]

MallSerg,
а есть у вас какой-то минимально достаточный вариант делегирования?
(в учебнике есть, хотелось бы ваш вариант или какой другой, если можно)

[Alexandroppolus]

[].forEach.call(row.querySelectorAll('td'),node=>node.onclick=myPosition);

странная приставка позволяет не создавать лишний временный объект (массив), что хорошо, ибо чем больше объектов, тем чаще придется собирать мусор

с другой стороны, может случиться деоптимизация forEach, потому что вместо работы только с массивами она становится полиморфной.

так что палка действительно о двух концах.

старый добрый цикл всё равно быстрее и экономичнее )

а сам forEach давно есть в прототипе NodeList (который создается методом querySelectorAll)

[MallSerg]

MallSerg,
а есть у вас какой-то минимально достаточный вариант делегирования?
(в учебнике есть, хотелось бы ваш вариант или какой другой, если можно)

Нет конечно. просто у меня есть свое мнение =)

[Malleys]

а сам forEach давно есть в прототипе NodeList

Вы конечно можете расширять прототипы как угодно, но сам интерфейс w3.org/TR/dom/#interface-nodelist не содержит такого определения (содержит только итератор, что достаточно для перечисления, добавление же методов от массива несколько излишне, поскольку некоторые методы не могут быть применены надлежащим образом. Например, метод sort от массива на самом деле не смог бы отсортировать ноды в представлении на экране, нужен именно особенный метод, который бы произвёл подобную сортировку. В большинстве случаев вам не нужна такая привязка, так что подойдёт любой способ перевода в массив (Array.from, или простое перечисление цикл for-of, for с переменной).)