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

Question

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 内容和标签名称，但我如何才能找出在 table 中单击的行号？

Answer 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>

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

Find which row number is clicked in a table using event delegation

html

javascript

dom

html-table

dom-events