Как определить нажатую ячейку таблицы в JavaScript?
В коде HTML/JavaScript я динамически генерирую таблицу с различными элементами. Первый столбец состоит из элементов типа img, к которым я добавляю обратный вызов, когда пользователь нажимает на одно такое изображение.
В обратном вызове, как я могу определить строку изображения, на которую нажал пользователь?
Должен ли я использовать элемент event.target.currentSrc (который содержит путь к источнику изображения), чтобы понять это? Или есть лучший способ получить строку изображения, по которому щелкнули?
<div id = "overlay">
<div id = "modal-content">
<span class = "close">×</span>
<table id = "myTable" class = "aircraftTable"><thead>
<tr><th>Type</th><th>Cost</th><th>Range</th><th>Seats</th><th>Consumption</th></tr>
<tr><td><img src = "static/img/A320neo.jpg" width = "100"><br>A320 neo</td><td>97000000</td><td>5200</td><td>150</td><td>2.43</td></tr>
<tr><td><img src = "static/img/B787-10.jpg" width = "100"><br>B787-10</td><td>270000000</td><td>15000</td><td>246</td><td>2.37</td></tr>
</thead></table>
</div>
</div>
Никогда не слышал об этом раньше. У меня нет большого опыта в javascript
Другой вопрос. Как вы визуализировали эту таблицу? Динамически? Есть ли петля?
event.target.closest('tr') дает вам строку. event.target свойство PointerEvent наследуется от Event, поэтому вы не видите его в документах PointerEvent.
@Teemu Спасибо за это, но есть ли способ получить номер строки?
@AksenP Да, есть петля
Сама строка содержит свойство rowIndex.
@Teemu Большое спасибо! Может быть, вы дадите мне ссылку, где это задокументировано? Я не могу найти target, задокументированный под PointEvent...
?? В моем комментарии выше уже есть ссылка на интерфейс Event. Или вы имели в виду документы rowIndex ..?
<img src = "static/img/A320neo.jpg" data-id = "1234" onclick = "myFunction(this.dataset.id)" width = "100">
@ Teemu Я просматривал документацию PointerEvent. Итак, чтобы узнать все свойства этого класса, вам нужно просмотреть ВСЕ унаследованные экземпляры, в данном случае MouseEvent, UIEvent и Event. Разве нет формы документации, которая также включает все унаследованные атрибуты и методы? Кажется, немного больно проверять все родительские классы...
Именно такой способ выбрали участники MDN для документации. Насколько я знаю, это лучшая доступная документация для JS/DOM, так что, вероятно, нет.
@Teemu Хорошо, честно. Большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Существует свойство rowIndex, которое вы можете использовать.
В этом примере я прикрепил один прослушиватель событий к элементу body таблицы, который перехватывает события от своих дочерних элементов (благодаря делегированию событий . При щелчке по ячейке таблицы код находит ближайший элемент строки и затем захватывает его индекс.
const tbody = document.querySelector('tbody');
tbody.addEventListener('click', handleClick);
function handleClick(e) {
if (e.target.matches('td')) {
const row = e.target.closest('tr');
console.info(row.rowIndex);
}
}th, td { border: 1px solid black; padding: 0.5em; }
table { border-collapse: collapse; }<table>
<tbody>
<tr><td>1</td><td>1.1</td></tr>
<tr><td>2</td><td>2.1</td></tr>
<tr><td>3</td><td>3.1</td></tr>
</tbody>
</table>
Что вы думаете об использовании
.dataSet?