关键词：
【中文标题】用于在 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 行。用于生成表格行的 JavaScript
】用于生成表格行的JavaScript【英文标题】：JavaScriptforgeneratetablerow【发布时间】：2015-02-0103:28:54【问题描述】：我对JavaScript和HTML有疑问；我有一个只有一行的表，我想使用JavaScript添加额外的一行。我的脚本工作正常，但我的问... 查看详情
jQuery滑块范围：应用范围作为表格行的过滤器
】jQuery滑块范围：应用范围作为表格行的过滤器【英文标题】：jQuerysliderrange:applyrangeasafilterontablerows【发布时间】：2015-03-0615:31:14【问题描述】：在我的实习中，我必须为一个表格制作一个过滤器，该表格必须只显示介于你给它... 查看详情
sortable.js实现两个不同的表格之间表格行的拖曳的功能
...音视频的素材的替换，做的拖曳：实现两个列数据不同的表格之间的行数据的替换，以及行的增加。由于当初项目是基于jquery的，所以一下内容也是基于jquery的，但是思想和方法是通用的，需要的小伙伴，如果你的项目是基于vue... 查看详情
jquery为表格每行添加按钮操作相应行的内容
从数据库读出内容然后生成表格，在操作栏里面添加3个图标（想要当按键用），怎么才能绑定事件呢？而且要操作对应的行参考技术A$(function () $("table tr td:nth-child(5)").html( &nb... 查看详情
如何使用 jQuery 在按钮单击时添加额外的 html 表格行？
】如何使用jQuery在按钮单击时添加额外的html表格行？【英文标题】：HowdoIaddanextrahtmltablerowuponbuttonclickusingjQuery?【发布时间】：2011-12-2212:42:38【问题描述】：我有以下几点：<table><tr><td>author\'sfirstname</td><td>a... 查看详情
使用 jQuery 选择表格行的值
】使用jQuery选择表格行的值【英文标题】：SelectingvaluesoftablerowusingjQuery【发布时间】：2013-04-2212:56:15【问题描述】：我有一个表格，每一行都包含下拉列表。Rows没有id属性。因此，由于row没有id属性，我如何获取下拉列表的选定... 查看详情
选择表格行并通过ajax添加行时如何更改表格行的颜色
】选择表格行并通过ajax添加行时如何更改表格行的颜色【英文标题】：Howtochangecoloroftablerowwhenitisselectedandrowaddedthroughajax【发布时间】：2020-12-1702:35:22【问题描述】：我在MVCC#中通过ajax动态添加了表行。现在我想更改选定行的颜... 查看详情
带有垂直行的 HTML 表格
】带有垂直行的HTML表格【英文标题】：HTMLTablewithverticalrows【发布时间】：2013-05-3020:44:47【问题描述】：如何在HTML中制作垂直表格？所谓垂直，我的意思是行将是垂直的，表格标题在左侧。我也需要这种方式，这样我就可以使用... 查看详情
如何更改 HTML 中表格行的高度？
】如何更改HTML中表格行的高度？【英文标题】：HowtochangetheheightoftablerowsinHTML?【发布时间】：2022-01-1719:32:45【问题描述】：我有一张桌子，我想增加每一行的高度。到目前为止，我已经尝试将height属性添加到<tableclass="tabletable-... 查看详情
jquery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子，有些人评论说"如果表格中是input元素，那么删除后的东西都将自动替换，这样应该是有问题的，建议楼主改进！"，故特意改进了一下！在项目中很多时候遇到... 查看详情
jquery中关于表格行的增删问题
1.程序1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>Inserttitlehere</title>6<scripttype="text/javascript"src="jquery-3.2.1.min.js"></script>7 查看详情
Jquery按日期隐藏表格行的方法
】Jquery按日期隐藏表格行的方法【英文标题】：Jquerywaytohidetablerowsbydate【发布时间】：2014-08-3104:08:11【问题描述】：我有一个按日期排序的数据表。是否有任何Jquery插件或代码来隐藏日期早于当前日期的行？日期是行的td元素的... 查看详情
将 Google Map iFRAME 放置在 HTML 表格行的页面中心
】将GoogleMapiFRAME放置在HTML表格行的页面中心【英文标题】：PlacingGoogleMapiFRAMtocenterofpageinHTLMtablerow【发布时间】：2021-02-1521:16:43【问题描述】：我正在使用angular.js并将iram放在我的html表格行中，它没有出现在页面的中心。我正在... 查看详情
Chrome (v51) - 用于在表格行之间插入分页符的媒体查询 - 仅限横向
】Chrome(v51)-用于在表格行之间插入分页符的媒体查询-仅限横向【英文标题】：Chrome(v51)-Mediaquerytoinsertpagebreaksbetweentablerows-landscapeonly【发布时间】：2016-09-2422:02:13【问题描述】：我有一个无法修改的大型HTML表格，如果方向仅为横... 查看详情
在 MVC4 上向 DOM 表添加行的问题
...东西，但看不到它是什么。有什么想法吗？例子这是我的表格代码<div><ahre 查看详情
Jquery在点击时选择表格行不起作用
】Jquery在点击时选择表格行不起作用【英文标题】：Jquerytoselectatablerowonclickdoesn\'twork【发布时间】：2020-02-2713:03:36【问题描述】：我正在尝试使用JQuery在单击时切换html表格行的类“突出显示”。该表是使用Django模板语言创建的... 查看详情
表格行的jQuery条件选择器
】表格行的jQuery条件选择器【英文标题】：jQueryconditionalselectorfortablerows【发布时间】：2011-03-1722:04:26【问题描述】：我有一个数据表：<td>item</td><td>ordercode</td><td>price</t 查看详情
在 JavaScript 中创建表格行的克隆并附加到表格
】在JavaScript中创建表格行的克隆并附加到表格【英文标题】：CreatecloneoftablerowandappendtotableinJavaScript【发布时间】：2010-12-1605:50:56【问题描述】：在JavaScript中，如何将行动态添加到表中？在JavaScript事件中，我想创建一个类似的... 查看详情