<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui动态添加删除表格，并获取表格中的值</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
</style>
</head>
<body style="padding: 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="title" lay-verify="required" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选项</label>
<div class="layui-input-inline">
<select id="gift" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
{foreach from=$info item=vo}
<option value="{$vo.id}">{$vo.title}</option>
{/foreach}
</select>
</div>
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" id="num" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" onclick="add()" id="testList">添加到表格</button>
<div class="layui-upload-list">
<table class="layui-table" id="tab">
<thead id="tb">
<tr><th>名称1</th>
<th>名称2</th>
<th>名称3</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
</div>
</form>
<script src="layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var form = layui.form,layer = layui.layer;
var $ = layui.$;
var element = layui.element;
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "<th><input type='hidden' name='"+id+"[id]' value='"+id+"'>"+id+"</th><th>"+title+"</th><th><input type='hidden' name='"+id+"[num]' value='"+num+"'>"+num+"</th><th> <button onclick='del(this)' class='layui-btn layui-btn-xs layui-btn-danger'>删除</button></th>";
document.getElementById("tb").appendChild(trObj);
}
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
//监听提交
form.on('submit(demo2)', function(data){
// layer.alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// })
var title=$("#title").val();
if(title==''){
layer.msg("标题不能为空！");
return false;
}
$.post("test.php",data.field,function(backdata){
layer.alert(backdata);
});
return false;
});
</script>
</body>
</html>