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

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

делегация - обзор

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

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

обратите внимание, что порядок параметров в функции разные.

пример

A сравнение между прямым вложением обработчика и делегированием доступно ниже или на 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.

П. С.:

если у вас есть вложенные таблицы (или, в общем случае, вы хотите делегировать элементы с определенной глубиной), вы можете использовать это предложение из отчета об ошибке jQuery.

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

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

посмотреть рабочая демо

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

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

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

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

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

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

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

демо