<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="layui/css/layui.css">
<title>按鈕添加表單</title>
<style>
.layui-form-label,.layui-input-block{
margin-left:0;
float: left;
}
.layui-input{
float: left;
width: 47%;
margin-left: 3%;
}
.layui-btn-add{
margin-left: 10px;
}
</style>
</head>
<body>
<button class="layui-btn" id="layui-btn" onclick="AddInput()">新增</button>
<div id="body">
<div class="layui-form-item">
<label class="layui-form-label">單行輸入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input" >
<input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input" >
</div>
</div>
</div>css
<script src="layui/jquery-3.3.1.js"></script>
<script src="layui/layui.js"></script>
<script>
var count = 1;
//用來判斷是刪除 仍是增長按鈕 以便count值進行計算
function checkCount(boolOK, coun) {
if (boolOK == true) {
return count++;
}
else {
count--;
}
}
//添加一個input標籤 同時也對它的ID和Name進行賦值。
function AddInput() {
countAA = checkCount(true, count);
var body = document.getElementById("body");
//建立div盒子用於包裹input+刪除按鈕
var div = document.createElement("div");
div.id = "bodys[" + count + "]";
div.setAttribute('class','layui-form-item')
body.appendChild(div);html
var label = document.createElement("label");
label.setAttribute('class','layui-form-label');
div.appendChild(label);jquery
var divin = document.createElement("div");
divin.setAttribute('class','layui-input-block');
div.appendChild(divin);app
//建立input
var input = document.createElement("input");
input.type = "text";
input.setAttribute('class','layui-input');
input.name = "title1[" + count + "].name";
input.autocomplete="title1[" + count + "].name";
divin.appendChild(input); //向元素增長子節點 最爲最後一個子節點ui
//建立input
var input = document.createElement("input");
input.type = "text";
input.setAttribute('class','layui-input');
input.name = "title2[" + count + "].name";
input.autocomplete="title2[" + count + "].name";
divin.appendChild(input);this
//建立刪除按鈕
var input = document.createElement("input");
input.type = "button";
input.value="刪除";
input.setAttribute('class','layui-btn layui-btn-add');
div.appendChild(input);scala
//建立一個空格
var br = document.createElement("br");
div.appendChild(br);orm
// $(".layui-btn-add").click(function () {
// $(this).parent('div').remove()
// })
}
</script>
</body>
</html>htm
文中須要用到layui.css layui.js jquery.jsip