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

最新推荐文章于 2023-10-25 09:27:56 发布

转载最新推荐文章于 2023-10-25 09:27:56 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/itafei/2058602

文章标签：

#javascript #php #json #ViewUI

本文介绍了一个使用layui框架实现的动态表格案例，该案例支持在网页中动态添加和删除表格行，并能获取表格中的数据进行提交。通过简单的HTML、CSS及JavaScript代码实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<style>
</style>
</head>
<body style="padding: 10px">

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

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>

转载于:https://blog.51cto.com/itafei/2058602