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

有什么帮助吗？

Answer 1

没有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 2

我建议您在 table 的每个 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。

Answer 3

您可以使用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>

获取下一个 table 单元格 onclick javascript 的值

Get the value of the next table cell onclick javascript

html

javascript

click

cell