本文旨在提供一个详细教程，指导如何在HTML表单中动态添加和删除行，尤其是在表单内容包含PHP生成数据时。我们将通过JavaScript和jQuery实现DOM操作，构建可复用的行模板，并探讨如何处理PHP预渲染内容以及动态下拉菜单的选项，确保表单功能完整且用户体验流畅。
引言：动态表单行的需求
在现代Web应用中，用户经常需要动态地向表单中添加或删除条目，例如添加多个设备信息、联系人或产品规格。这种需求通过静态HTML难以满足，而JavaScript结合DOM操作则能优雅地解决。本教程将聚焦于如何利用jQuery简化这一过程，并特别关注当HTML内容由PHP动态生成时可能遇到的挑战。
核心挑战：PHP与JavaScript的协同
用户在开发过程中常遇到的一个困惑是，当HTML表单中包含PHP标签（例如，用于从数据库加载下拉菜单选项）时，如何使用JavaScript动态复制这些行。理解PHP和JavaScript的执行环境是关键：
-
PHP（服务器端）： PHP在服务器上执行，负责生成最终的HTML、CSS和JavaScript代码，然后将其发送到客户端浏览器。这意味着当浏览器接收到页面时，所有的PHP标签都已经被处理并替换成了具体的HTML内容。
-
JavaScript（客户端）： JavaScript在浏览器中执行，它操作的是PHP已经生成并发送到客户端的最终HTML结构。
因此，当JavaScript动态添加或删除行时，它操作的是已经渲染好的HTML字符串。如果一个行模板包含PHP动态生成的内容（如下拉菜单的选项），那么在构建JavaScript模板字符串时，我们应该包含PHP已经渲染出的完整HTML片段，而不是PHP标签本身。如果新添加的行需要动态加载数据（例如，根据用户的选择实时从数据库获取选项），则需要通过AJAX（异步JavaScript和XML）在客户端与服务器进行通信。
java-api-doc-generator
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
下载
立即学习“Java免费学习笔记（深入）”；
使用jQuery实现动态行操作
jQuery库极大地简化了JavaScript的DOM操作，使其成为实现动态表单行的理想选择。
HTML结构准备
为了实现动态行的添加和删除，我们需要一个清晰的HTML结构。通常，我们会将可重复的表单元素放在一个
的内，或者一个容器内。
-
容器元素： 使用作为所有动态行的父容器。
-
操作按钮： 在表头或每行末尾添加“添加”和“删除”按钮。这些按钮应具有易于识别的类名或data-*属性，以便JavaScript可以准确地定位它们。
-
表单字段命名： 对于会重复的输入字段（如name="brand[]"），使用数组命名约定（name="fieldname[]"）。这样，当表单提交时，服务器端（如PHP）可以轻松地将这些字段的值作为数组接收。
示例HTML片段（基于用户提供代码的简化和优化）：
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center">Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class="btn text-success add-row-btn" data-name='add'><i class="fe fe-plus-circle" style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper" id="table_body">
<!-- 初始行，作为模板或第一个可编辑行 -->
<tr class="dynamic-row">
<td>
<select class="form-control form-select brand-select" name="brand[]" required="" onchange="checkDeviceStatus()">
<!-- PHP will render options here on page load -->
<option value="1">Brand A</option>
<option value="2">Brand B</option>
<!-- ...更多选项由PHP生成... -->
</select>
</td>
<td>
<select class="form-control form-select model-select" name="model[]" required="" onchange="checkDeviceStatus()">
<!-- PHP will render options here on page load -->
<option value="101">Model X</option>
<option value="102">Model Y</option>
<!-- ...更多选项由PHP生成... -->
</select>
</td>
<td><input type="text" name="serialNo[]" class="form-control serialNo-input" onchange="checkDeviceStatus()"></td>
<td><input type="text" name="deviceLevel[]" class="form-control deviceLevel-input" readonly=""></td>
<td><button type="button" class="btn text-danger delete-row-btn" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>注意：
- add-row-btn和delete-row-btn是自定义的类名，用于JavaScript选择器。
- name="brand[]"、name="model[]"等确保表单提交时数据以数组形式传递。
- id属性（如id="brand"）在动态复制时会导致ID重复，这是无效HTML。建议将id属性移除，或为每个新行动态生成唯一的ID，但通常对于动态行中的字段，使用类名进行JavaScript操作更为稳妥。
JavaScript行模板的构建
将要复制的行内容存储为一个JavaScript字符串模板。这允许我们轻松地插入新的行。
// 注意：此模板中的下拉菜单选项是硬编码的示例。
// 如果需要PHP动态生成的选项，应将PHP渲染后的完整 <select> HTML片段放入此模板。
const table_row_html = `
<tr class="dynamic-row">
<td>
<select class="form-control form-select brand-select" name="brand[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>Select Brand</option>
<option value="1">Brand A</option>
<option value="2">Brand B</option>
<option value="3">Brand C</option>
<!-- 如果需要PHP动态加载的选项，将PHP渲染后的 <option> 标签放在这里 -->
</select>
</td>
<td>
<select class="form-control form-select model-select" name="model[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>Select Model</option>
<option value="101">Model X</option>
<option value="102">Model Y</option>
<option value="103">Model Z</option>
<!-- 如果需要PHP动态加载的选项，将PHP渲染后的 <option> 标签放在这里 -->
</select>
</td>
<td><input type="text" name="serialNo[]" class="form-control serialNo-input" onchange="checkDeviceStatus()"></td>
<td><input type="text" name="deviceLevel[]" class="form-control deviceLevel-input" readonly=""></td>
<td><button type="button" class="btn text-danger delete-row-btn" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>`;处理PHP预填充的下拉菜单：
如果您的下拉菜单选项是由PHP从数据库加载的，并且希望新添加的行也包含这些选项，最直接的方法是：
- 在PHP渲染初始页面时，确保
- 将这个完整的、由PHP渲染后的HTML片段直接复制到JavaScript的table_row_html模板字符串中。
这样，当JavaScript复制行时，它会复制包含所有预设选项的下拉菜单。
添加行功能实现
使用jQuery的事件委托机制来处理动态添加的“添加”按钮点击事件。
$(document).ready(function() {
// 监听所有 .add-row-btn 按钮的点击事件
$(document).on("click", ".add-row-btn", function() {
const table_body = $(this).closest("table").find("tbody");
// 将模板字符串追加到 tbody
table_body.append(table_row_html);
// 如果新行中的元素需要特定的JS初始化（如日期选择器、自定义下拉菜单），在这里进行
// 例如：table_body.find(".new-element-class").somePluginInitialization();
return false; // 阻止默认的链接或按钮行为
});
});删除行功能实现
同样使用事件委托来处理动态添加的“删除”按钮点击事件。
$(document).ready(function() {
// 监听所有 .delete-row-btn 按钮的点击事件
$(document).on("click", ".delete-row-btn", function() {
// 确保至少保留一行，防止全部删除导致无法添加
const table_body = $(this).closest("tbody");
if (table_body.find(".dynamic-row").length > 1) {
$(this).closest("tr").remove(); // 移除最近的父级 <tr> 元素
} else {
alert("至少需要保留一行。");
}
return false; // 阻止默认的链接或按钮行为
});
});完整示例代码
结合上述HTML和JavaScript，这是一个完整的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表单行管理</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 或类似的图标库，用于 fe-plus-circle/fe-minus-circle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
<style>
.card { margin-bottom: 20px; }
.table th, .table td { vertical-align: middle; }
</style>
</head>
<body>
<div class="container mt-5">
<div class="col-xl-8 col-md-12 mx-auto">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title">设备信息</h3>
</div>
<div class="card-body">
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center">设备品牌</th>
<th class="text-center">设备型号</th>
<th class="text-center">序列号</th>
<th class="text-center" style="width:10%">SLA设备</th>
<th>
<button type="button" class="btn text-success add-row-btn" data-name='add'>
<i class="fas fa-plus-circle" style="font-size:1.6em;"></i>
</button>
</th>
</tr>
</thead>
<tbody class="field_wrapper" id="table_body">
<!-- 初始行 -->
<tr class="dynamic-row">
<td>
<select class="form-control form-select brand-select" name="brand[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>选择品牌</option>
<!-- 假设这些选项由PHP在页面加载时生成 -->
<option value="1">Dell</option>
<option value="2">HP</option>
<option value="3">Lenovo</option>
</select>
</td>
<td>
<select class="form-control form-select model-select" name="model[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>选择型号</option>
<!-- 假设这些选项由PHP在页面加载时生成 -->
<option value="101">Latitude 7420</option>
<option value="102">EliteBook 840 G8</option>
<option value="103">ThinkPad X1 Carbon</option>
</select>
</td>
<td><input type="text" name="serialNo[]" class="form-control serialNo-input" onchange="checkDeviceStatus()"></td>
<td><input type="text" name="deviceLevel[]" class="form-control deviceLevel-input" readonly=""></td>
<td>
<button type="button" class="btn text-danger delete-row-btn" data-name="del">
<i class="fas fa-minus-circle" style="font-size:1.6em;"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// JavaScript 行模板
const table_row_html = `
<tr class="dynamic-row">
<td>
<select class="form-control form-select brand-select" name="brand[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>选择品牌</option>
<option value="1">Dell</option>
<option value="2">HP</option>
<option value="3">Lenovo</option>
<!-- 如果这些选项需要动态加载，请参考“动态下拉菜单选项”部分 -->
</select>
</td>
<td>
<select class="form-control form-select model-select" name="model[]" required="" onchange="checkDeviceStatus()">
<option value="" selected disabled>选择型号</option>
