javascript - 获取下一个表格单元格onclick 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);

有什么帮助吗？

标签： javascripthtmlclickcell

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>