在前端开发中，经常需要动态地向表格中添加新的行。jQuery 提供了非常方便的方法来实现这个功能。本文将详细介绍如何使用 jQuery 动态添加表格行，并附带示例代码。
准备工作
在开始之前，我们需要准备以下文件：
- jQuery 库文件
- 包含表格的 HTML 文件
可以通过以下链接下载最新版本的 jQuery 库文件：
添加行
要在表格中添加行，我们需要找到表格的 <tbody> 元素，然后使用 jQuery 的 append() 方法来添加新的行。下面是一个简单的示例：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
--------
--------
------- -------------------------
------- -------------------------
--------
------------ -
------------------------------ -
--- ------ - ----------------------------------
--------------------------
---
---
---------在上面的示例中，我们首先找到了包含表格数据的 <tbody> 元素，然后定义了一个新的表格行。当用户单击“添加行”按钮时，jQuery 会向 <tbody> 元素中添加新的行。
添加多个行
如果需要一次性添加多个表格行，可以使用 jQuery 的 appendTo() 方法。这个方法将新的元素添加到指定元素的末尾。下面是一个示例：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
--------
--------
------- ---------------------------
------- -------------------------
--------
------------ -
------------------------------- -
--- ------- - ---
--- ---- - - -- - - -- ---- -
------- -- ------------ - -- - -- - ----------- - --- - -- - -------------
-
-----------------------------
---
---
---------在上面的示例中，我们定义了一个包含 5 行的字符串变量 newRows，然后使用 appendTo() 方法将它们添加到 <tbody> 元素中。
删除行
除了添加行以外，还可能需要删除表格中的某些行。要删除表格行，我们需要找到要删除的行，然后使用 jQuery 的 remove() 方法将其从 DOM 中删除。下面是一个示例：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------- -----------------------------------
-----
----
-----------
-----------
----------- -----------------------------------
-----
--------
--------
------- -------------------------
--------
------------ -
--------------------------------- -
-------------------------------
---
---
---------在上面的示例中，我们为每个行添加了一个“删除”按钮。当用户单击按钮时，jQuery 将找到最近的 <tr> 元素，并将其从 DOM 中删除。
总结
本文介绍了如
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13439