Есть таблица, которая заполняется через PHP:
<table id="position">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Статус</th>
<th scope="col">IP-адрес</th>
<th scope="col">Последняя активность</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr id='{$ip}'>
<th scope='row'>{$id}</th>
<td>{$online}</td>
<td><a href='http://{$ip}' target='_blank'>{$ip}</a></td>
<td>{$lastActive}</td>
<td id='button'><i class='bi bi-trash' style='font-size: 20px' ;></i></td>
</tr>";
</tbody>
</table>
Есть отслеживание нажатия по строке таблицы:
const tbody = document.querySelector('#position tbody');
tbody.addEventListener('click', function (e) {
const cell = e.target.closest('td');
if (!cell) {return;} // Quit, not clicked on a cell
const row = cell.parentElement;
console.log(row.rowIndex, row.id);
Проблема в том, что функция отслеживает клик по всей строке таблицы, а мне нужно только по последней ячейке (с id='button'
). Пробовал несколько вариантов - ничего не помогло - отслеживалась только ячейка первой строки, остальные игнорировались.