文章目录
前言
本文是自己在进行项目编写时遇到的情况,特此记录,以便下次使用时方便直接使用。
一、功能需求
添加订单时,可能涉及到多个配件,故需要动态添加表单元素,以实现功能需求。
框出部分为动态添加的表单元素
二、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>
总结
以上记录了我是如何实现该功能需求,加上我实现该功能的相关代码。