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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Получить координаты ячейки из <table> (https://javascript.ru/forum/misc/75871-poluchit-koordinaty-yachejjki-iz-table.html)

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

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

<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);
}

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

<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>

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

Цитата:

Сообщение от Nexus

[].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;
}

Цитата:

Сообщение от Malleys

Array.from

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

:write:
или так

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

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

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

Цитата:

Сообщение от Malleys

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

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

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

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

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

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

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

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

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

Цитата:

Сообщение от рони (Сообщение 498483)

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

Цитата:

Сообщение от Alexandroppolus

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

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