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

Question

Я сейчас реализую что-то вроде этого поста (в частности, эффект имеет место при нажатии строки)

Как узнать, какой индекс строки находится внутри таблицы?

Answer 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;
});

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

Answer 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;
});

Answer 3

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

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

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