当前位置：文江博客话题详情

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

发布于 2024-12-28 19:37:58 字数 764 浏览 0 评论 0 原文

在现有 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>

原文

What is the jQuery syntax for adding rows in between existing HTML table rows?

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

I want to add

<tr>xx</tr>

in between 1 and 2

eg:

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

and please note here there is no id for rows.

Correcting the final look

before

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

after

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫烠⑼条掵仅有一顆心 2025-01-04 19:37:58

像这样的东西：

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

Something like this:

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

回复收藏 0 原文

画尸师 2025-01-04 19:37:58

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

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

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

gt stands for greater than. Note that index of the rows starts at 0, not 1.

回复收藏 0 原文

像极了他 2025-01-04 19:37:58

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

您可以将 first() 替换为 eq(n)（其中 n 是从 0 到 0 的数字） code>n-1 rows of the table) 并将该行添加到任何现有行之后。

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

You can replace first() with eq(n) (in which n is a number from 0 to n-1 rows of the table) and add the row after any existing row.

回复收藏 0 原文

烟燃烟灭 2025-01-04 19:37:58

特别是为了浏览器之间的一致性，您应该将所有 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/

示例
insertAfter: $('xx').insertAfter($('tr:first'));
之后：$('tr:first').after('xx');

回复收藏 0 原文

意犹 2025-01-04 19:37:58

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

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

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

我想这并不完全是您所需要的，您能告诉我们您到底想做什么吗？

向元素添加内容的方法有多种。我建议查看 jQuery 文档，尤其是 DOM Insertion, around ，DOM 插入，内部和 DOM 插入，外部。

The answer to your question (taking it literally) is:

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

This means: add "xx" after the <tr> that contains "1" in the table with id "test".

I guess that's not exactly what you need, can you tell us what do you exactly want to do?

There are various ways to add content to elements. I suggest to have a look at the jQuery Doc, especially at the DOM Insertion, Around, the DOM Insertion, Inside and the DOM Insertion, Outside.

回复收藏 0 原文

善良天后 2025-01-04 19:37:58

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

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

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

还值得注意的是使用 jQuery 选择“第一个”元素的方法多种多样。在这个问题的 5 个答案中，我们看到了 3 种不同的方法，甚至还有更多。使用 .eq(0)< /code> 是最有效的。

Assuming you are looking for a way to insert the new row after the first existing row (and you're not looking for a way to insert it in a place described by the contents of existing rows) you can use after to insert the content, and eq to reduce the set of matched elements to the one at the required index:

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

Note that I've added in a td element, since it's invalid to have text nodes as children of tr elements.

It's also worth noting the wide variety of ways to select the "first" element with jQuery. In the 5 answers to this question we see 3 different methods, and there are even more than that. Using .eq(0) is the most efficient.

回复收藏 0 原文

~没有更多了~