Как при нажатии на определённую строку таблицы вывести по отдельности содержимое каждой ячейки этой строки?

Question

var tds = document.querySelectorAll('tr');

for(var i=0;i<tds.length;i++)
tds[i].addEventListener('click', function func(){

    alert(this.innerHTML) <!-- Так можно вывести содержимое всей строки таблицы-->
     <!--Как вывести, скажем первый и третий, чтобы потом это вывести в input-->

})

Answer 1

Как при нажатии на определённую строку таблицы вывести по отдельности содержимое каждой ячейки этой строки? Как вывести, скажем первый и третий

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

document.querySelector('tbody').addEventListener('click', e => {
  const or = e.target.closest('tr')
  if (!or) return
  const o = or.cells
  const s = `Первый "${o[0].textContent}" и третий "${o[2].textContent}" строки`
  alert(s)
})

<table border='1'>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
      <th>Заголовок 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Элемент 1.1</td>
      <td>Элемент 1.2</td>
      <td>Элемент 1.3</td>
      <td>Элемент 1.4</td>
    </tr>
    <tr>
      <td>Элемент 2.1</td>
      <td>Элемент 2.2</td>
      <td>Элемент 2.3</td>
      <td>Элемент 2.4</td>
    </tr>
    <tr>
      <td>Элемент 3.1</td>
      <td>Элемент 3.2</td>
      <td>Элемент 3.3</td>
      <td>Элемент 3.4</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Как при нажатии на определённую строку таблицы вывести по отдельности содержимое каждой ячейки этой строки?

Ответы (1 шт):