Html js. Как добавить событие onclick только на часть ячеек в таблице?

Рейтинг: 0Ответов: 1Опубликовано: 28.07.2023

Нужно сделать так чтобы при клике на первые две ячейки каждой строки таблицы срабатывала ссылка. Попробовал обернуть нужные ячейки через div, но так ничего не работает. Подскажите, как правильнее сделать?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>ПРИМЕР</title>
</head>
<body>
<table class="table">
<thead>
    <tr>
        <th>Столбец 1</th>
        <th>Столбец 2</th>
        <th>Столбец 3</th>
        <th>Столбец 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <div style='cursor: pointer;' onclick="document.location='https://yandex.ru'"> <!--?????????? -->
            <td>данные1</td>
            <td>данные1</td>
        </div>
        <td>данные1</td>
        <td>данные1</td>
    </tr>
    <tr>
        <td>данные2</td>
        <td>данные2</td>
        <td>данные2</td>
        <td>данные2</td>
    </tr>
    
</tbody>
</table>

</body>
</html>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1

Нужно сделать так чтобы при клике на первые две ячейки каждой строки таблицы срабатывала ссылка.

Такое можно реализовать, например, вот так...

document.querySelector('.table tbody').addEventListener('click', e => {
  const o = e.target
  const op = o.closest('tr')
  if (op.cells[0] != o && op.cells[1] != o) return
  alert('ok')
  // document.location='https://yandex.ru'
})
<table class="table">
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>данные1</td>
      <td>данные1</td>
      <td>данные1</td>
      <td>данные1</td>
    </tr>
    <tr>
      <td>данные2</td>
      <td>данные2</td>
      <td>данные2</td>
      <td>данные2</td>
    </tr>

  </tbody>
</table>