Javascript 如何判断在表中单击了哪个行号？

我有一张如下表：

111
222
333

---

对于第一个

tr

，它会向0发出警报。如果要提醒1，可以将1添加到索引。

这将获得单击行的索引，从一开始：

$（'thetable'）。查找（'tr'）。单击（函数（）{
警报（'您单击了行'+（$（this）.index（）+1））；
});

111
222
333
您可以使用索引从0开始的
对象.rowIndex
属性

$("table tr").click(function(){
    alert (this.rowIndex);
});

请参见
更好的方法是委派事件，这意味着在事件冒泡时将其捕获到父节点

代表团-概述
此解决方案更健壮、更高效

它允许处理事件，即使以后动态地将更多行添加到表中，也会导致将单个事件处理程序附加到父节点（
table
element），而不是为每个子节点（
tr
element）附加一个事件处理程序

假设OP的示例是简化的，则表的结构可能更复杂，例如：

<table id="indexedTable">
    ...
    <tr>
        <td><p>1</p></td>
        <td>2</td>
        <td><p>3</p></td>
    </tr>
</table>

它们将侦听器附加到
table
元素，并处理从表行冒泡的任何事件。当前API是

上的

方法，而
委托
方法是遗留API（实际上在幕后调用

上的

）

请注意，两个函数的参数顺序不同

例子
下面或JSFIDLE上提供了直接处理程序附件和委派之间的比较：


$（“#表委托”）。在（“单击”，“tr”，函数（e）{
var idx=$（e.currentTarget）.index（）+1；
$（“#授权idx”）。文本（idx）；
console.log（'delegated'，idx）；
});
$（“#表直接tr”）。在（“单击”，函数（e）{
var idx=$（e.currentTarget）.index（）+1；
$（“#直接idx”）.text（idx）；
console.log（'direct'，idx）；
});
$（“[data action=add row]”）。单击（函数（e）{
var id=e.target.dataset.table；
$（“#”+id+“tbody”）
.append（$（'extraextra'）[0]）
});
tr：悬停{
背景：ddd；
}
按钮。添加行{
边缘底部：5px；
}

事件处理测试
将行添加到两个表中，并查看处理方面的差异

事件委派附加单个事件侦听器，并捕获与新添加的子级相关的事件

直接事件处理将事件处理程序附加到每个子级，在初始处理程序附加之后添加的子级没有附加处理程序，因此它们的索引不会记录到控制台

授权
行索引：未知

将行添加到委派
正常的
正常的
正常的
嵌套

嵌套

嵌套

正常的
正常的
嵌套

直接连接
行索引：未知

直接添加行
正常的
正常的
正常的
嵌套

嵌套

嵌套

正常的
正常的
嵌套

在某些情况下，我们可能有几个表，然后我们需要检测特定表的单击。我的解决办法是：

<table id="elitable" border="1" cellspacing="0" width="100%">
  <tr>
 <td>100</td><td>AAA</td><td>aaa</td>
  </tr>
  <tr>
<td>200</td><td>BBB</td><td>bbb</td>
   </tr>
   <tr>
<td>300</td><td>CCC</td><td>ccc</td>
  </tr>
</table>


    <script>
    $(function(){
        $("#elitable tr").click(function(){
        alert (this.rowIndex);
        });
    });
    </script>


100AAAAA
200bbbbbbbb
300CCCC
$（函数（）{
$（“#elitable tr”）。单击（函数（）{
警报（此.rowIndex）；
});
});

一个简单且无jQuery的解决方案：

document.querySelector('#elitable').onclick = function(ev) {
   // ev.target <== td element
   // ev.target.parentElement <== tr
   var index = ev.target.parentElement.rowIndex;
}

document.querySelector（'#elitable'）.onclick=function（ev）{
//ev.target这两个都不适用于我。当我单击表时没有响应，没有输入函数。@CashCow:旧答案，旧jQuery等。首先，你应该使用
on
现在：
$（'thetable tr'）。on（'click'，function（）{…}）
。可能会动态加载部分或全部表，在这种情况下，您可以尝试绑定到DOM就绪时已知存在的元素，如
文档
：
$（文档）
。使用此解决方案的另一个问题。当我尝试它时，它从未进入method.Tx。我突然想到，让表处理此问题一定比让行处理此问题更好。大多数其他答案似乎都没有回答OP的问题：如何让表处理此问题…此答案值得更多的投票。简单且无依赖性是一个很好的选择总是好的。
<table id="elitable" border="1" cellspacing="0" width="100%">
  <tr>
 <td>100</td><td>AAA</td><td>aaa</td>
  </tr>
  <tr>
<td>200</td><td>BBB</td><td>bbb</td>
   </tr>
   <tr>
<td>300</td><td>CCC</td><td>ccc</td>
  </tr>
</table>


    <script>
    $(function(){
        $("#elitable tr").click(function(){
        alert (this.rowIndex);
        });
    });
    </script>

document.querySelector('#elitable').onclick = function(ev) {
   // ev.target <== td element
   // ev.target.parentElement <== tr
   var index = ev.target.parentElement.rowIndex;
}