如何判断在表格中点击哪个行号？
我有一个如下表格：
<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
