如何判断在表格中点击哪个行号?

我有一个如下表格:

<table> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>2</td><td>2</td><td>2</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> </table> 

当用户点击表格时,如何获得该行的索引( tr元素)?

例如,当我点击第一个tr (在上面的表中有1 s)时,它应该select并返回1

这将得到你点击行的索引,从一开始:

 $('#thetable').find('tr').click( function(){ alert('You clicked row '+ ($(this).index()+1) ); }); 

如果要返回存储在每行的第一个单元格中的数字:

 $('#thetable').find('tr').click( function(){ var row = $(this).find('td:first').text(); alert('You clicked ' + row); }); 

一个更好的方法是委托事件,这意味着捕获它,因为它冒泡到父节点。

代表团 – 概述

这个解决scheme更加健壮和高效。

它允许事件被处理,即使稍后将更多的行dynamic添加到表中,也会导致将单个事件处理程序附加到父节点( table元素),而不是每个子节点( tr元素)都附加一个事件处理程序。

假设OP的例子是一个简化的例子,那么表格的结构可能会更复杂,例如:

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

因此,一个简单的方法,如获取e.target.parentElement将不起作用,因为单击内部<p>并单击中心<td>会产生不同的结果。

使用委托规范化事件处理,只假定没有嵌套表。

履行

以下两个片段都是相同的:

 $("#indexedTable").delegate("tr", "click", function(e) { console.log($(e.currentTarget).index() + 1); }); $("#indexedTable").on("click", "tr", function(e) { console.log($(e.currentTarget).index() + 1); }); 

它们将一个监听器附加到table元素上,并处理来自表行中的任何事件。 当前的API是on方法,而delegate方法是legacy API(实际上on幕后调用)。

请注意,这两个函数的参数顺序是不同的。

直接处理程序附件和委托之间的比较可以在下面或在jsFiddle上获得:

 $("#table-delegate").on("click", "tr", function(e) { var idx = $(e.currentTarget).index() + 1; $("#delegation-idx").text(idx); console.log('delegated', idx); }); $("#table-direct tr").on("click", function(e) { var idx = $(e.currentTarget).index() + 1; $("#direct-idx").text(idx); console.log('direct', idx); }); $('[data-action=add-row]').click(function(e) { var id = e.target.dataset.table; $('#' + id + ' tbody') .append($('<tr><td>extra</td><td>extra</td><td>extra</td></tr>')[0]) }); 
 tr:hover{ background:#ddd; } button.add-row { margin-bottom: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <h1>Event handling test</h1> <p>Add rows to both tables and see the difference in handling.</p> <p>Event delegation attaches a single event listener and events related to newly added children are caught.</p> <p>Direct event handling attaches an event handler to each child, where children added after the inital handler attachment don't have a handler attached to them, and therefore their indices won't be logged to console.</p> <h2>Delegation</h2> <p><span>row index: </span><span id="delegation-idx">unknown</span></p> <button class="add-row" data-action="add-row" data-table="table-delegate">Add row to delegation</button> <table id="table-delegate" class="table"> <tbody> <tr> <td>normal</td> <td>normal</td> <td>normal</td> </tr> <tr> <td><p>nested</p></td> <td><p>nested</p></td> <td><p>nested</p></td> </tr> <tr> <td>normal</td> <td>normal</td> <td><p>nested</p></td> </tr> </table> <h2>Direct attachment</h2> <p><span>row index: </span><span id="direct-idx">unknown</span></p> <button class="add-row" data-action="add-row" data-table="table-direct">Add row to direct</button> <table id="table-direct" class="table"> <tbody> <tr> <td>normal</td> <td>normal</td> <td>normal</td> </tr> <tr> <td><p>nested</p></td> <td><p>nested</p></td> <td><p>nested</p></td> </tr> <tr> <td>normal</td> <td>normal</td> <td><p>nested</p></td> </tr> </tbody> </table> 

您可以使用具有从0开始的索引的object.rowIndex属性。

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

看到一个工作演示

 $('tr').click(function(){ alert( $('tr').index(this) ); }); 

对于第一个tr ,它提醒0.如果你想提醒1,你可以加1到索引。

一个简单和jQuery免费的解决scheme:

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

奖励:即使dynamic添加/删除行,它也可以工作

在某些情况下,我们可以有几个表,然后我们需要检测点击只是为了特定的表。 我的解决办法是:

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

DEMO