动态表单行管理：利用JavaScript与jQuery实现增删功能-html教程-PHP中文网

动态表单行管理：利用javascript与jquery实现增删功能

本文旨在提供一个详细教程，指导如何在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免费学习笔记（深入）”；

使用jQuery实现动态行操作

jQuery库极大地简化了JavaScript的DOM操作，使其成为实现动态表单行的理想选择。

HTML结构准备

为了实现动态行的添加和删除，我们需要一个清晰的HTML结构。通常，我们会将可重复的表单元素放在一个zuojiankuohaophpcntable>的<tbody>内，或者一个<div>容器内。

容器元素： 使用<tbody>作为所有动态行的父容器。
操作按钮： 在表头或每行末尾添加“添加”和“删除”按钮。这些按钮应具有易于识别的类名或data-*属性，以便JavaScript可以准确地定位它们。
表单字段命名： 对于会重复的输入字段（如name="brand[]"），使用数组命名约定（name="fieldname[]"）。这样，当表单提交时，服务器端（如PHP）可以轻松地将这些字段的值作为数组接收。

示例HTML片段（基于用户提供代码的简化和优化）：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<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渲染初始页面时，确保<select>标签内部包含了所有可能的<option>标签。
将这个完整的、由PHP渲染后的<select>...</select>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>

登录后复制

以上就是动态表单行管理：利用JavaScript与jQuery实现增删功能的详细内容，更多请关注php中文网其它相关文章！