使用事件委托查找在表中单击的行号

Posted 2023-03-05

【中文标题】使用事件委托查找在表中单击的行号

【英文标题】：Find which row number is clicked in a table using event delegation

【发布时间】：2021-10-26 16:48:14

【问题描述】：

function mainClick()
console.log(event.target.innerhtml);
console.log(event.target.tagName);

<table onclick="mainClick()">
<tr>
  <th>ID</th>
  <th>Name</th>
</tr>
<tr>
  <td>8475</td>
  <td>yogesh</td>
</tr>
<tr>
  <td>7512</td>
  <td>tarun</td>
</tr>
<tr>
  <td>3322</td>
  <td>aman</td>
</tr>
<tr>
  <td>1232</td>
  <td>vishesh</td>
  </tr>
<tr>
  <td>9877</td>
  <td>rahul</td>
</tr>
</table>


 

我正在使用事件委托的概念，这意味着将事件侦听器添加到父元素而不是添加到后代元素。每当由于冒泡而在后代元素上触发事件时，侦听器都会触发。

我可以检索 html 内容和标签名称，但是如何找出在表格中单击了哪个行号？

【问题讨论】：

这能回答你的问题吗？ How to tell which row number is clicked in a table?

【参考方案1】：

event.target.parentElement.rowIndex 就像一个魅力。

function mainClick()
console.log(event.target.parentElement.rowIndex);
console.log(event.target.innerHTML);
console.log(event.target.tagName);

<table onclick="mainClick()">
<tr>
  <th>ID</th>
  <th>Name</th>
</tr>
<tr>
  <td>8475</td>
  <td>yogesh</td>
</tr>
<tr>
  <td>7512</td>
  <td>tarun</td>
</tr>
<tr>
  <td>3322</td>
  <td>aman</td>
</tr>
<tr>
  <td>1232</td>
  <td>vishesh</td>
  </tr>
<tr>
  <td>9877</td>
  <td>rahul</td>
</tr>
</table>