您的位置: 首页  >  文章  >  layui动态添加删除表格，并获取表格中的值

layui动态添加删除表格，并获取表格中的值

分类: 文章 • 2022-07-16 17:13:15

<!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>

相关推荐