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

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（上表中带有1s）时，它应该将其拾取并返回1。

Answer 1

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

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

奖励：即使动态添加/删除行，它也可以工作

Answer 2

这将为您获取点击行的索引，从一个开始：

$('#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 3

在某些情况下，我们可能有几个表格，然后我们需要检测特定表格的点击。我的解决方案是这样的：

<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

Answer 4

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

对于第一个tr，它提醒0。如果你想提醒1，你可以在索引中加1。

Answer 5

更好的方法是委托事件，这意味着在它冒泡到父节点时将其捕获。

代表团 - 概述

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

即使稍后将更多行动态添加到表中，它也允许处理事件，并且还导致将单个事件处理程序附加到父节点（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> 会产生不同的结果。

使用委托规范化事件处理，仅假设没有嵌套表。

实现

以下两个sn-ps是等价的：

$("#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>

这是demo on jsFiddle。

附注：

如果您确实有嵌套表（或者，在一般情况下，希望委托给具有特定深度的元素），您可以使用this suggestion from the jQuery bug report。

Answer 6

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

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

查看working demo