![](/img/trans.png)
[英]Javascript HTML Table get first column's cell value based on another cell's onclick
[英]Get the value of the next table cell onclick javascript
我正在尝试获取我单击的单元格右侧的单元格的值。
但现在我得到了我想要的单元格的值,但我可以单击该行中的任何单元格并获得所需的值。 但它应该只适用于第一列。 所以我单击第一列中的任何单元格,我想获取它的下一个相邻单元格值。
document.querySelector("#tableEventListId").addEventListener("click",event => {
let dataTr = event.target.parentNode;
let deleteEventId = dataTr.querySelectorAll("td")[1].innerText;
console.log(deleteEventId);
alert(deleteEventId);
有什么帮助吗?
您可以使用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>
没有 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);
});
}
我建议您在表的每个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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.