Как сверстать ячейки в таблице?

Question

[Mark321]

Добрый день. подскажите пожалуйста, есть таблица
такой структуры

<tr>
   <td>
   <td>
   <td>

стоит задача, что бы при клике на любой элемент кроме первого происходило событие
вложенные тд порядка 10
не хочется вешать на каждый обработчик
хочется обернуть их в какой-то тег и тегу задать обработчик
Но не понимаю как это сделать
https://codepen.io/scrappyjs666/pen/ExePMyp
В проекте от такого решения плывет верстка
я пробовал задавать обертку в качестве тега и нашел в интернете решение, которое обнулят все стили тега, но все равно не получилось
как это можно решить

Comments

[Вадим]

Возможно, Вам стоит ознакомится с этой техникой: https://learn.javascript.ru/event-delegation.
jsfiddle за vpn в РФ.
Сейчас лучше codepen

[Mark321]

Вадим, исправил на кодепен, про делегирование событий я в курсе, но в проекте реакт, если честно, не знаю, как конкретно в реакте это можно применить

Answer 1

[Alexander Bazhenov]

Не оборачивай td в div внутри tr.
Как вариант, убери все дивы, что написал и в JS тебе потребуется всего один обработчик на самой таблице:

const table = document.querySelector("table");
table.addEventListener("click", (e) => {
  if (e.target.tagName === "TD" && e.target.parentElement.children[0] !== e.target) {
    console.log('Тут твой код');
  }
});

Тут мы проверяем, что target клика пришелся на один из TD, а затем проверяем, что это не первый TD в своем родителе.