使用 jQuery 添加表格行：初学者与专业人士教程

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

如何使用 jQuery 向表格添加行：完整指南

处理 HTML 表格是前端开发人员最常见的任务之一。而动态地向表格添加新行更是经典中的经典。想象一下：您正在开发一个在线商店、博客后台或任务管理系统。几乎总是需要用户能够点击“添加”按钮，然后表格中就会出现一条新记录。

今天，我们将详细探讨如何使用 jQuery 添加表格行。这不仅仅是枯燥的理论，而是一个包含实际代码示例的实践性分步教程。您将了解最流行的方法、潜在陷阱和最佳实践。我们开始吧！

为什么选择 jQuery 而不是纯 JavaScript？

这个问题问得好。是的，原生 JavaScript 早已能够操作 DOM，并且 document.createElement 方法也一直存在。但是，使用 jQuery 学习添加表格行更快、更简单，尤其是对于初学者。jQuery 处理了跨浏览器兼容性问题，并提供了优雅的语法。此外，生产环境中数百万行代码都是用 jQuery 编写的——并且需要维护它们。因此，掌握这些技巧是 Web 开发人员的必备技能。

我们实验用的基础 HTML

首先，我们需要一个简单的表格。以下是它的标记——请将其复制到您的 HTML 文件或 CodePen 之类的沙盒中。

<!DOCTYPE html><html lang="ru"><head>    <meta charset="UTF-8">    <title>使用 jQuery 向表格添加行</title>    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script></head><body>

<h2>员工列表</h2><table id="employees" border="1">    <thead>        <tr>            <th>姓名</th>            <th>职位</th>            <th>薪资</th>        </tr>    </thead>    <tbody>        <tr>            <td>安娜</td>            <td>开发人员</td>            <td>150 000 ₽</td>        </tr>        <tr>            <td>伊万</td>            <td>设计师</td>            <td>120 000 ₽</td>        </tr>    </tbody></table>

<button id="addRow">添加行</button>

<script>// 这里将放置我们的 jQuery 代码</script>

</body></html>

请注意：表格有 thead（表头）和 tbody（表体）。这是正确的语义结构。使用 jQuery 向表格添加行时，我们将操作 tbody，而不是整个表格——这样我们就不会破坏表头。

方法 #1：jQuery append —— 经典方法

最流行的方法是使用 .append() 方法。它将内容添加到所选元素的末尾。在我们的例子中，是添加到 tbody 的末尾。

假设我们要添加一名新员工。代码如下：

$('#addRow').on('click', function() {    var newRow = '<tr>' +                 '<td>彼得</td>' +                 '<td>经理</td>' +                 '<td>100 000 ₽</td>' +                 '</tr>';    $('#employees tbody').append(newRow);});

非常简单：我们构建一个包含新表格行的 HTML 字符串，然后使用 jQuery 添加表格行的 append 方法将其插入。现在，每次点击按钮，表格中就会出现经理彼得。

重要提示：如果您的标记中没有 tbody，jQuery 可能会将行直接添加到 table 中，但这样可能会插入到错误的位置。始终使用 tbody！