Get the value of the next table cell onclick javascript

Question

I am trying to get the value of the cell right of the cell where i click.

But right now I get the value of the cell I want, but I can click any cell in that row and get the desired value. But it should only be possible with the first column. So I click the any cell in the first column and I wanna get it's next neighbour cell value.

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

Any help?

Answer 1

You can use 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

There is no HTML, so I can assume it's something like

<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>

According to this HTML, you can try

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);
     });
 }

Have a look https://jsfiddle.net/vyspiansky/k2toLd8w/

Answer 3

I would recommend you to a an event on every td element of the table. Then use nextElementSibling to get a next cell.

Look code snippet to see the example.

 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>

If you want it to work only for cells at first column change the selector to #tableEventListId td:first-child .