时间戳

首页 > 解决方案 > 使用事件委托查找在表中单击的行号

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

问题描述

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 内容和标签名称，但是如何找出在表格中单击了哪个行号？

标签： javascripthtmldomhtml-tabledom-events

解决方案

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>

推荐阅读