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

Question

我有一个如下表:

<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)时,它应该将其拾起并返回1.

Answer 1

这将获得所点击行的索引,从一个开始:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="thetable">
   <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>

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

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

Answer 2

一种更好的方法是委托事件,这意味着在事件发生时将其捕获到父节点.

代表团 - 概述

该解决方案更加强大和高效.

它允许处理事件,即使稍后将更多行动态添加到表中,并且还导致将单个事件处理程序附加到父节点(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方法是遗留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>

这是关于jsFiddle的演示.

PS:

如果你有嵌套表(或者,在一般情况下,希望委托给具有特定深度的元素),你可以使用jQuery错误报告中的这个建议.

Answer 3

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

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

查看工作演示

Answer 4

一个简单的jQuery免费解决方案:

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

额外奖励:即使动态添加/删除行也可以