Как узнать, какой номер строки нажата в таблице?

Ответ 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);
});

Ответ 2

Лучшим подходом было бы делегирование события, что означает ловить его, когда он пузырится с родительским node.

делегирование - обзор

Это решение является более надежным и эффективным.

Он позволяет обрабатывать событие, даже если большее число строк динамически добавляется в таблицу позже, а также приводит к присоединению одного обработчика события к родительскому элементу node (table) вместо одного для каждого дочернего элемента node (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>

Ответ 3

Вы можете использовать свойство object.rowIndex, которое имеет индекс, начинающийся с 0.

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

См. рабочая демонстрация

Ответ 4

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

Для первого tr он предупреждает 0. Если вы хотите оповестить 1, вы можете добавить 1 к индексу.

Ответ 5

Простое и бесплатное jQuery решение:

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

Бонус: Он работает, даже если строки добавляются/удаляются динамически

Ответ 6

В некоторых случаях у нас может быть несколько таблиц, а затем нам нужно обнаружить клик только для определенной таблицы. Мое решение таково:

<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