layui中动态添加多个表单元素

---

前言

本文是自己在进行项目编写时遇到的情况，特此记录，以便下次使用时方便直接使用。

---

一、功能需求

添加订单时，可能涉及到多个配件，故需要动态添加表单元素，以实现功能需求。

框出部分为动态添加的表单元素

---

二、HTML页面代码

代码如下（示例）：

<div class="layuimini-container">
    <div class="layuimini-main">
            <div id="bc">
                <div class="layui-form-item">
                    <label class="layui-form-label">配件</label>
                    <div class="layui-input-block">
                        <select name="accessory[0][accessory]" lay-verify="required">
                            <option value="">请选择配件</option>
                            {
    
    volist name='accessory' id = 'accessory'}
                            <option value="{$accessory.id}">{
    
    $accessory.name}</option>
                            {
    
    /volist}
                        </select>
                        <div class="layui-form-mid layui-word-aux">注：编辑订单时不用选择该项，新增订单时需要选择该项</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配件数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="accessory[0][account]" lay-verify="required" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                        <div class="layui-form-mid layui-word-aux">注：编辑订单时不用选择该项，新增订单时需要选择该项</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="insertInput()">增加配件</button>
                </div>
            </div>
        </div>
    </div>
</div>

注：代码只截取主要部分代码，由于本人使用的是PHP语言，在select选择框部分可自行修改为其它语言的写法。

---

三、js代码

代码如下（示例）：

<script>
    //定义一个方法使得调用时使count加一
    function a(){
    
    
        count++
    }
    //定义全局变量count
    var count = 1
    layui.use(['form', 'layer'], function () {
    
    
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //动态增加表单元素方法
        window.insertInput = function () {
    
    
            //定义表单元素name名，使用二维数组方便后端接收
            var accessory = `accessory[${
    
    count}][accessory]`
            var account = `accessory[${
    
    count}][account]`
            //获取id为bc的所有元素
            let bc = document.getElementById('bc')
            //控制台输出bc
            console.log(bc)
            //克隆bc，cloneNode(true) 代表深克隆—完全把真节点的东西给复制了过来
            let bcClone = bc.cloneNode(true)
            //控制台输出所要克隆的元素的name，getAttribute 方法用于拿到设置的自定义属性的属性值，唯一一个参数就是搜索的自定义属性名（也要用引号包起来）
            console.log(bcClone.childNodes[1].childNodes[3].childNodes[1].getAttribute('name'))
            console.log(bcClone.childNodes[3].childNodes[3].childNodes[1].getAttribute('name'))
            //将克隆的内容的name值进行修改， setAttribute()   是用于设置自定义属性的方法,有两个参数，第一个是属性名，第二个是属性值，添加时必须用引号括起来
            bcClone.childNodes[1].childNodes[3].childNodes[1].setAttribute('name',accessory)
            bcClone.childNodes[3].childNodes[3].childNodes[1].setAttribute('name',account)
            //打印修改后的元素name
            console.log(bcClone.childNodes[1].childNodes[3].childNodes[1].getAttribute('name'))
            console.log(bcClone.childNodes[3].childNodes[3].childNodes[1].getAttribute('name'))
            //将克隆的内容加在bc后， after方法用于在元素后插入内容
            bc.after(bcClone)
            //调用a方法
            window.a()
            //重载模糊搜索框
            form.render('select');
            //控制台打印相关值
            console.log(count,accessory,account)
        };
    });
</script>

---

总结

以上记录了我是如何实现该功能需求，加上我实现该功能的相关代码。