用于在 HTML 表格行之间添加行的 Jquery 语法

Posted 2023-03-05

【中文标题】用于在 HTML 表格行之间添加行的 Jquery 语法

【英文标题】：Jquery syntax for adding rows in between HTML table rows

【发布时间】：2012-02-17 19:18:24

【问题描述】：

在现有 html 表格行之间添加行的 jQuery 语法是什么？

<Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> 

我要添加

<tr>xx</tr> 

在 1 到 2 之间

例如：

<tr>1</tr>   **<tr>xx</tr>** <tr>2</tr>

请注意这里没有行的 id。

修正最终外观

之前

<table id=Test><tr> <td>1 </td> </tr><tr> <td>2 </td> </tr></table>

之后

 <table id=Test><tr> <td>1 </td> </tr>  <tr> <td>xx </td> </tr> <tr> <td>2 </td></tr></table>

【参考方案1】：

假设您正在寻找一种在第一条现有行之后插入新行的方法（并且您不是在寻找一种将其插入现有行内容描述的位置的方法），您可以使用after插入内容，eq 将匹配元素集减少到所需索引处的元素：

$("#TEST tr").eq(0).after("<tr><td>x</td></tr>");

请注意，我添加了 td 元素，因为将文本节点作为 tr 元素的子节点是无效的。

同样值得注意的是，使用 jQuery 选择“第一个”元素的方法多种多样。在这个问题的 5 个答案中，我们看到了 3 种不同的方法，而且还有更多。使用.eq(0) is the most efficient。

【参考方案2】：

您的问题的答案（字面意思）是：

$("table#test tr:contains('1'").after('<tr>xx</tr>');

这意味着：在ID为“test”的表中包含“1”的<tr>之后添加“xx”。

我猜这不是你所需要的，你能告诉我们你到底想做什么吗？

有多种方法可以向元素添加内容。我建议看一下 jQuery Doc，尤其是 DOM Insertion, Around、DOM Insertion, Inside 和 DOM Insertion, Outside。

【参考方案3】：

特别是为了浏览器之间的一致性，您应该将所有tr 包装在tbody 元素中。那么您可以after()/insertAfter() 新行（第一行之后）或before()/insertBefore() 行（最新行之前）。

http://api.jquery.com/after/http://api.jquery.com/before/http://api.jquery.com/insertAfter/http://api.jquery.com/insertBefore/

的例子 插入后：$('<tr>xx</tr>').insertAfter($('tr:first')); 之后：$('tr:first').after('<tr>xx</tr>');

【参考方案4】：

类似这样的：

$('#TEST > tbody > tr').eq(0).after('<tr>xx</tr>');

【讨论】：

这可能行不通，因为浏览器倾向于在table 和tr 之间插入tbody 元素。

所以，只需在代码中添加一个tbody...不是吗？

只要所有浏览器都插入tbody，就可以了。为了安全起见，您可能应该自己将tbody 添加到 HTML 中。但是，在这种情况下，不需要使用子选择器，因为我们正在寻找第一个元素，它总是一个子元素（它不能在嵌套表中）。

$('#TEST')[0] 将表格返回给我，但是当我使用 $('#TEST tr:gt(0)')[0] 时未定义或什么也不返回。我是这里有什么遗漏吗？我有超过 10 行

@SNA：尝试我的回答中描述的代码...我看到您使用的是不同的代码。

【参考方案5】：

$('#test tr').first().append('<tr>xx</tr>');

您可以将first() 替换为eq(n)（其中n 是表格中0 到n-1 行之间的一个数字）并在任何现有行之后添加该行。

【参考方案6】：

$('#TEST tr:gt(0)').after('<tr>xx</tr>');

gt 代表大于。请注意，行的索引从 0 开始，而不是 1。

【讨论】：

请记住，如果表格中有超过 2 行，这将在除第一行之外的所有行之后插入一个新行。

$('#TEST')[0] 将表格返回给我，但是当我使用 $('#TEST tr:gt(0)')[0] 时未定义或什么也不返回。我是这里有什么遗漏吗？我有超过 10 行。