layui动态添加删除表单行多表单提交验证代码-html代码-BFW代码库

layui动态添加删除表单行多表单提交验证代码

代码语言：html

代码描述：layui动态添加删除表单行多表单提交验证代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>

<style>
    html,
      body {
        height: 100%;
      }
    
      .myTable {
        width: 1200px;
        height: 600px;
        margin: 0 auto;
        border: 1px #eee double;
        box-sizing: border-box;
      }
    
      .t-header {
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    
      .t-main {
        height: 50px;
        display: flex;
        align-items: center;
        background-color: #eee;
      }
    
      .myTable .t-main span {
        width: 16%;
        display: inline-block;
        box-sizing: border-box;
        margin: 10px;
        text-align: center;
      }
    
      .myTable .layui-input {
        width: 16%;
        display: inline-block;
        box-sizing: border-box;
        margin: 10px 5px;
      }
    
      .delItem {
        margin-left: 40px;
      }
    
      .t-footer {
        height: 500px;
        overflow: auto;
      }
</style>
</head>
<body>
    <div class="myTable">
        <!-- 按钮 -->
        <header class="t-header">
            <button type="button" class="layui-btn subBtn">保存</button>
            <button type="button" class="layui-btn addBtn">新增</button>
        </header>
        <!-- 表头 -->
        <main class="t-main">
            <span>房号</span>
            <span>面积</span>
            <span>基准价</span>
            <span>单位</span>
            <span>能源套餐</span>
            <span>操作</span>
        </main>
        <!-- 模板 -->
        <section class="t-section" style="display: none">
            <form class="layui-form">
                <input type="text" name="resourceName" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="area" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="unitrice" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="pricingUnit" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="setId" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <button type="button" class="layui-btn layui-btn-primary layui-border-red delItem" onclick="delrow(this)">删除</button>
                <button type="submit" class="layui-btn layui-hide subItem" lay-submit="" lay-filter="subItem">提交</button>
            </form>
        </section>
        <!-- 表单 -->
        <footer class="t-footer">
            <form class="layui-form" lay-filter="f0">
                <input type="text" name="resourceName" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="area" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="unitrice" class="layui-input" placeholder="请输入" autocomplete="off" lay-verify="required">
                <input type="text" name="pricingUnit.........完整代码请登录后点击上方下载按钮下载查看