Question

这是一个带有一些示例代码的jsFiddle：http://jsfiddle.net/x9faq/

我有一个包含许多行的表，其中包含'group'和'item'列。该表由数据库中的数据填充，行按“组”分组。

还有一种方法可以让用户动态地向表中添加行，但是当前新行会立即添加到结尾，如下所示：

$('.Table > tbody:last').one().append(tr);

我宁愿发生的是该行插入其相关组的底部。在实际的脚本中，'categoryTitle'是动态生成的，但是对于这个例子，我把它硬编码为'Drugs'。在维持“组”分组的同时，我必须能够在新行中插入最接近的是：

$('.Table tr>td:contains("' + categoryTitle + '")').one().last().after(tr);

如果单击示例中的“添加行”按钮，它将在最后一个'Drugs'组项后添加一行，但它会在包含'Drugs'的表格单元格之后添加它，这不是我想要的。

我的另一个问题是该表可能并不总是包含数据，在这种情况下我的代码失败，因为它找不到任何相关的表列。如何有条件地控制这个，以便如果表是空的或者没有相关的'Group'行已存在，它只是在表的末尾添加一行，否则它会在最后一个匹配的'Group'行之后插入新行？

Answer 1

one用于附加单个事件实例的事件处理程序，与您的示例无关。

您需要将其删除并使用parent()返回tr元素并插入新行after。试试这个：

var $table = $('.Table');
var $lastRow =  $('tr > td:contains("' + categoryTitle + '")', $table).last().parent();
if ($lastRow.length) {
    $lastRow.after(tr);
}
else {
    $table.append(tr);
}

Example fiddle

如何使用jQuery以编程方式在表中的指定点添加表行？

1 个答案: