jquery - 将添加的 tr 定位在表中

Question

我想将表格行添加到我的表格主体中，我可以使用以下代码实现：

var tr = $('<tr/>');
$('#myTable > tbody:last').append(tr);

但是有些页面可能有太多行，因此我在最后一行动态创建了一个分页器。

在这些情况下，如果我使用上面的代码，新的代码tr将附加在分页器下方，这不是很好。

我的分页器tr有 id<tr id="paginator_tr"> 我想知道是否可以更改此代码

$('#myTable > tbody:last').append(tr);

有一个条件来检查最后一个 tr 是否有id = "paginator_tr"if ，然后在该分页器行之前添加新行。否则，只需将新行附加为最后一行。

像这样的条件在jquery中可能吗？

Answer 1

var $tbody = $('#myTable > tbody').last(),
    $paginator_tr = $tbody.find('#paginator_tr');

if ($paginator_tr.length) {
    $paginator_tr.before(tr)
} else {
    $tbody.append(tr)
}

如果 paginator 元素存在，则可以使用before方法，否则可以附加 tr 元素。

Answer 2

使用insertBefore()假设您的分页行始终存在

tr.insertBefore( '#paginator_tr')

API 参考：http ://api.jquery.com/insertBefore/

Answer 3

这是另一种方法，可能只是有点疯狂（尽管它有效！）：

var table = $(this),
    tr = $('<tr />'),
    td = $('<td />', {'text' : 'Newly-added cell.'}).appendTo(tr),
    method = table.find('#paginator_row').length ? ['insertBefore', '#paginator_row'] : ['appendTo', table.find('tbody').last()]
    tr[method[0]](method[1]);

JS 小提琴演示。

实际上，该method数组包含两个参数，第一个是要使用的 jQuery 方法，第二个是该方法的选择器，以确定tr添加元素的位置；它依赖于这样一个事实，即可以通过点符号 ( object.propertyName) 和方括号 ( object[propertyName]) 访问对象的属性。

参考：

• appendTo().
• find().
• last().