如何用jQuery知道a中a的索引< tr>< table>?

iecba09b  于 2023-03-07  发布在  jQuery
关注(0)|答案(4)|浏览(178)

我现在实现类似this post的东西(具体来说,效果是在单击行时发生的)
我如何知道行在表中的索引是什么?

dddzy1tm

dddzy1tm1#

如果直接在tr元素上定义了click处理程序,则可以按如下方式使用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;
});

尝试here示例。

ilmyapht

ilmyapht2#

这应该行得通:

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

如果你确信你的html是格式良好的,那么在调用siblings时就不需要tr

w46czmvw

w46czmvw3#

回答你的第一个问题:

$("#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;
});
zd287kbt

zd287kbt4#

HTMLTableRowElement.rowIndex怎么样?
HTMLTableRowElement.rowIndex只读属性表示行相对于整个<table>的位置。
请注意,如果行中包含theadtbodytfoot标记,这些标记也会被计算在内。

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

相关问题