layui动态添加删除表格，并获取表格中的值
<!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>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
