Получить значение следующей ячейки таблицы по клику javascript

Question

Я пытаюсь получить значение ячейки справа от ячейки, в которой я щелкнул.

Но прямо сейчас я получаю значение ячейки, которое хочу, но я могу щелкнуть любую ячейку в этой строке и получить желаемое значение. Но это должно быть возможно только с первым столбцом. Итак, я нажимаю любую ячейку в первом столбце и хочу получить значение следующей соседней ячейки.

document.querySelector("#tableEventListId").addEventListener("click",event => {
        let dataTr = event.target.parentNode;
        let deleteEventId = dataTr.querySelectorAll("td")[1].innerText;
        console.log(deleteEventId);
        alert(deleteEventId);

Любая помощь?

Answer 1

Вы можете использовать nextElementSibling

document.getElementById('table1').onclick = function(event){
  //REM: Target
  var tElement = event.target;

  if(
    //REM: Only cells (=<td>)
    tElement.tagName === 'TD' &&
    
    //REM: Only first column cells
    tElement.parentNode.firstElementChild === tElement
  ){ 
    //REM: Next Elementsibling of Target or Null
    var tNext = tElement.nextElementSibling;
      
    if(tNext){
      console.log('TD: ', tElement.textContent);
      console.log('Next: ', tElement.nextElementSibling.textContent)
    }
  }
}

table, td{
  border: 1px solid black
}

<table id = 'table1'>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

Answer 2

Нет HTML, поэтому я могу предположить, что это что-то вроде

<table border="1">
  <tr>
    <td class="first-column">1.1 (click here)</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td class="first-column">2.1 (click here)</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
</table>

Согласно этому HTML, вы можете попробовать

const firstColumns = document.querySelectorAll(".first-column");

 for (let i = 0; i < firstColumns.length; i++) {
     firstColumns[i].addEventListener("click", function(event) {
        let dataTr = event.target.parentNode;
        let deleteEventId = dataTr.querySelectorAll("td")[1].innerText;
        
        console.log(deleteEventId);
        alert(deleteEventId);
     });
 }

Посмотрите https://jsfiddle.net/vyspiansky/k2toLd8w/

Answer 3

Я бы порекомендовал вам проводить мероприятие для каждого td элемента таблицы. Затем используйте nextElementSibling для получения следующей ячейки.

Посмотрите фрагмент кода, чтобы увидеть пример.

    const cells = document.querySelectorAll('#tableEventListId td');
    cells.forEach(cell => cell.onclick = function(){
        const nextCell = cell.nextElementSibling;
        if (nextCell)
            alert(nextCell.innerHTML);
    })

<table id="tableEventListId">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
      <td>33</td>
      <td>44</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
    </tr>
  </table>

Если вы хотите, чтобы он работал только для ячеек в первом столбце, измените селектор на #tableEventListId td:first-child.