动态表单行增删，JS/JQuery高效实现

本篇文章给大家分享《动态表单行管理：JS/jQuery实现增删高效操作》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

核心原理：客户端HTML模板与事件委托

实现动态表单行的关键在于：

1. HTML模板化： 定义一个JavaScript字符串作为新表单行的HTML模板。这个模板应包含所有必要的表单元素（如输入框、下拉菜单等）以及增删按钮。
2. 事件委托： 使用jQuery的事件委托机制（$(document).on()）来监听增删按钮的点击事件。这确保了即使是动态添加的按钮也能响应事件，因为事件监听器是绑定在文档（或某个静态父元素）上的，而不是直接绑定在按钮上。
3. DOM操作： 利用jQuery的append()方法将模板字符串插入到指定位置（通常是），并使用remove()方法删除目标行。

处理PHP生成内容

当表单元素（如下拉菜单选项）由PHP从数据库中获取时，这只影响表单的初始渲染。当JavaScript动态添加新行时，它不会再次执行PHP代码。因此，新行的HTML模板必须包含完整的、已渲染好的下拉菜单选项。如果这些选项是固定的，可以直接在JavaScript模板中硬编码；如果选项需要根据某些条件动态加载，则需要通过AJAX在添加新行时异步获取数据并填充。

实现步骤

我们将通过一个具体的表格示例来演示如何动态添加和删除行。

1. HTML结构准备

首先，我们需要一个包含表单和表格的HTML结构。表格中应有至少一行作为初始模板，并包含用于添加和删除行的按钮。为了方便识别，我们通常在按钮上添加自定义属性（如data-name='add'或data-name='del'）或特定的类名。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container mt-4">
    <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">序列号</th>
                            <th class="text-center">设备级别</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>
                            <th scope="row">1</th>
                            <td>
                                &lt;select class=&quot;form-control form-select brand&quot; name=&quot;brand[]&quot; required=&quot;&quot;&gt;
                                    <option value="">请选择品牌</option>
                                    <!-- 假设这些选项由PHP生成或在此处硬编码 -->
                                    <option value="1">品牌A</option>
                                    <option value="2">品牌B</option>
                                    <option value="3">品牌C</option>
                                &lt;/select&gt;
                            </td>
                            <td>
                                &lt;select class=&quot;form-control form-select model&quot; name=&quot;model[]&quot; required=&quot;&quot;&gt;
                                    <option value="">请选择型号</option>
                                    <!-- 假设这些选项由PHP生成或在此处硬编码 -->
                                    <option value="101">型号X</option>
                                    <option value="102">型号Y</option>
                                    <option value="103">型号Z</option>
                                &lt;/select&gt;
                            </td>
                            <td>&lt;input type=&quot;text&quot; name=&quot;serialNo[]&quot; class=&quot;form-control serialNo&quot;&gt;</td>
                            <td>&lt;input type=&quot;text&quot; name=&quot;deviceLevel[]&quot; class=&quot;form-control&quot; readonly=&quot;&quot;&gt;</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>
            </div>
        </div>
    </form>
</div>

说明：

• name="brand[]"、name="model[]"等使用数组命名方式，方便后端接收多行数据。
• add-row-btn 和 delete-row-btn 是自定义的类名，用于JavaScript选择器。

2. JavaScript/jQuery实现

接下来，我们编写JavaScript代码来处理行的增删逻辑。

// 定义新行的HTML模板字符串
// 注意：下拉菜单的选项在这里是硬编码的。如果选项需要动态加载，
// 则需要通过AJAX在添加新行后进行填充，或者在后端预渲染好所有可能的选项。
const table_row_html = `
    <tr>
        <th scope="row">{{ROW_NO}}</th>
        <td>
            &lt;select class=&quot;form-control form-select brand&quot; name=&quot;brand[]&quot; required=&quot;&quot;&gt;
                <option value="">请选择品牌</option>
                <option value="1">品牌A</option>
                <option value="2">品牌B</option>
                <option value="3">品牌C</option>
            &lt;/select&gt;
        </td>
        <td>
            &lt;select class=&quot;form-control form-select model&quot; name=&quot;model[]&quot; required=&quot;&quot;&gt;
                <option value="">请选择型号</option>
                <option value="101">型号X</option>
                <option value="102">型号Y</option>
                <option value="103">型号Z</option>
            &lt;/select&gt;
        </td>
        <td>&lt;input type=&quot;text&quot; name=&quot;serialNo[]&quot; class=&quot;form-control serialNo&quot;&gt;</td>
        <td>&lt;input type=&quot;text&quot; name=&quot;deviceLevel[]&quot; class=&quot;form-control&quot; readonly=&quot;&quot;&gt;</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>`;

$(document).ready(function() {
    // 监听添加按钮的点击事件
    $(document).on("click", ".add-row-btn", function() {
        const table_body = $(this).closest("table").find("tbody");
        const current_row_count = table_body.children("tr").length;

        // 替换模板中的行号占位符，并追加新行
        table_body.append(
            table_row_html.replace("{{ROW_NO}}", current_row_count + 1)
        );
        return false; // 阻止默认行为
    });

    // 监听删除按钮的点击事件
    $(document).on("click", ".delete-row-btn", function() {
        // 确保至少保留一行
        const table_body = $(this).closest("table").find("tbody");
        if (table_body.children("tr").length > 1) {
            $(this).closest("tr").remove(); // 删除当前行
            // 重新编号，可选操作，但有助于保持界面整洁
            table_body.children("tr").each(function(index) {
                $(this).find("th[scope='row']").text(index + 1);
            });
        } else {
            alert("至少需要保留一行设备信息。");
        }
        return false; // 阻止默认行为
    });
});

代码说明：

• table_row_html：这是一个多行字符串，定义了新行的HTML结构。{{ROW_NO}}是一个占位符，用于动态设置行号。
• $(document).on("click", ".add-row-btn", ...)：使用事件委托，监听.add-row-btn的点击事件。closest("table").find("tbody")用于找到当前按钮所属表格的tbody元素。
• table_body.children("tr").length：获取当前表格体中的行数，用于计算新行的行号。
• table_row_html.replace("{{ROW_NO}}", current_row_count + 1)：在追加新行之前，将模板中的行号占位符替换为实际的行号。
• $(document).on("click", ".delete-row-btn", ...)：同样使用事件委托，监听.delete-row-btn的点击事件。
• $(this).closest("tr").remove()：找到当前点击的删除按钮所在的最近的元素并将其移除。
• 行号更新： 在删除行后，我们遍历剩余的行，并更新它们的行号，以保持序号的连续性。
• 至少保留一行： 增加了一个判断，确保用户不能删除所有行，至少保留一行设备信息。

注意事项与最佳实践

1. 唯一ID处理： 如果表单元素需要唯一的id属性（例如，为了与label关联或用于JavaScript操作），在动态添加行时需要确保生成的id是唯一的。一种常见做法是在id后附加一个动态的索引或时间戳。
2. 数据提交： 使用name="field[]"这样的命名方式，后端（如PHP）可以轻松地将这些数据作为数组接收，方便处理多行输入。
3. 事件处理： 如果新添加的行中的某些元素需要特定的JavaScript事件监听（例如，下拉菜单的onchange事件），这些事件也应该使用事件委托来绑定，或者在添加新行后手动绑定。
4. 性能优化： 对于非常大的表单或频繁的增删操作，考虑使用更高效的DOM操作方法或虚拟DOM库（如React、Vue），尽管对于大多数场景，jQuery的append()和remove()已经足够。
5. 用户反馈： 在添加或删除行时，可以考虑添加一些视觉反馈（如短暂的高亮或动画），以提升用户体验。
6. 表单验证： 动态添加的行中的输入字段也需要进行表单验证。确保你的验证逻辑能够处理这些动态元素。

总结

通过上述方法，我们能够有效地在HTML表单中实现动态添加和删除行的功能。核心在于利用JavaScript/jQuery的客户端能力，通过HTML模板和事件委托机制来管理DOM。即使初始表单内容由PHP等后端语言生成，只要将完整的HTML结构（包括所有选项）作为JavaScript模板，就能实现无缝的动态交互。对于更复杂的场景，如新行中的下拉菜单选项需要实时从数据库加载，则可以结合AJAX技术来进一步增强功能。

今天关于《动态表单行增删，JS/JQuery高效实现》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！