Как узнать индекс a <tr> внутри <table> с помощью jQuery?

Ответ 1

Если вы определили обработчик кликов непосредственно на элементах tr, вы можете использовать метод index следующим образом:

$('#tableId tr').click(function () {
  var rowIndex = $('#tableId tr').index(this); //index relative to the #tableId rows
});

Если событие click привязано не непосредственно к элементу tr (если вы используете якорь, кнопку и т.д.), вы должны найти ближайший tr, чтобы получить нужный индекс:

$(selector).click(function () {
  var rowIndex = $('#tableId tr').index($(this).closest('tr'));

  return false;
});

Попробуйте пример здесь.

Ответ 2

Чтобы ответить на свой первый вопрос:

$("#id tr").click(function() {
  alert($("#id tr").index(this));
});

Если вы просто выполните:

$("table tr").index(this);

и у вас на странице несколько таблиц, вы получите ошибочный результат.

При этом вам не нужно знать индекс для перемещения строк вверх и вниз в таблице. Например:

<table id="foo">
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>First row</td>
</tr>
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>Second row</td>
</tr>
<tr>
  <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td>
  <td>Third row</td>
</tr>
</table>

с чем-то вроде:

$("a.up").click(function() {
  var row = $(this).closest("tr");
  if (row.prev().length > 0) {
    row.insertBefore(row.prev());
  }
  return false;
});
$("a.down").click(function() {
  var row = $(this).closest("tr");
  if (row.next().length > 0) {
    row.insertAfter(row.next());
  }
  return false;
});

Ответ 3

Это должно работать:

$('#tableId tr').click(function () {
    var index = $(this).siblings('tr').index(this);
});

Вам не нужно tr в вызове siblings, если вы уверены, что ваш html будет правильно сформирован.