动态添加多组input、保存并回显

最新推荐文章于 2024-07-02 15:22:35 发布

foxbamboo

最新推荐文章于 2024-07-02 15:22:35 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

分类专栏： Layui 前端文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/foxbamboo/article/details/113444878

（参考了下面这篇文章，特别感谢！）

https://blog.youkuaiyun.com/wowlw411/article/details/107104882/

实现效果图
html
需要注意，不同区块的表格的第一行的每一个input标签，要有对应的id，id命名规则需要结合区块名称

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        label {
                  float: left;
                  display: block;
                  padding: 9px 15px;
                  width: 120px;
                  font-weight: 400;
                  line-height: 20px;
                  text-align: right;
              }
        .label-arrow{
            width: 30px;
            padding: 9px 0px;
            text-align: center;
        }
        .inputvalue{
            width: 40px;
            /*border: 1px solid #4e4e4e;*/
            display: inline;
            padding-left: 3px;
            text-align: center;
        }
         .inputvalue1{
            width: 40px;
            display: inline;
            padding-left: 3px;
             margin-left: 5px;
             z-index: 5;
             float: left;
             text-align: center;
        }
         .inputvalue2{
            width: 40px;
            display: inline;
            padding-left: 3px;
        }
        .labeltest{
            width: 130px;
            margin-left: -100px;
            z-index: -1;
        }
        .angle-range{
            width: 120px;
        }
        .label-title{
            width: 180px;
            margin-top: 0px;
           /* border: 1px solid #4e4e4e;*/
        }
        .label-title2{
            width: 100px;
            margin-top: 0px;
            float: left;
        }
        .label-title3{
            width: 60px;
            margin-top: 0px;
            padding: 9px 10px;
            float: left;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="layui-form timo-compile">
    <form th:action="@{/company/flowConfig/save}">
        <input type="hidden" name="id" th:if="${flowConfig}" th:value="${flowConfig.id}">
        <div class="layui-form-item">
            <label CLASS="label-title">标题</label>
            <div class="layui-input-inline angle-range" style="width: 130px">
                <input class="layui-input" lay-verify="required" type="text" name="title" placeholder="请输入标题" th:value="${flowConfig?.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label CLASS="label-title">测试气压（KPa）</label>
            <div class="layui-input-inline" style="width: 130px">
                <input class="layui-input" lay-verify="required|number" type="text" name="pressure" placeholder="请输入测试气压" th:value="${flowConfig?.pressure}">
            </div>
        </div>

        <!-- ZKG -->
        <div class="layui-form-item" style="position: relative">
            <label class="label-title2">ZKG</label>

            <div class="containers">
                <label class="label-title3">角度区间</label>
                <div id="table1">
                    <table class="table" id="table_ZKG">
                        <tr style="width: 135px">
                            <td>
                                <input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number"  type="text" name="a_ZKG" id="a_ZKG">
                                <label class="label-arrow">&rarr;</label>
                                <input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number"  type="text" name="b_ZKG" id="b_ZKG">
                            </td>
                            <td>
                                <label class="layui-form-label">角度间隔</label>
                                <div class="layui-input-inline" style="width: 40px">
                                    <input class="layui-input inputvalue" lay-verify="required|number"  type="text" name="angleStep_ZKG" id="angleStep_ZKG" placeholder="度">
                                </div>
                            </td>
                            <td>
                                <label class="layui-form-label">时间间隔</label>
                                <div class="layui-input-inline" style="width: 40px">
                                    <input class="layui-input inputvalue" lay-verify="required|number"  type="text" name="timeStep_ZKG" id="timeStep_ZKG" placeholder="秒">
                                </div>
                            </td>
                            <td>
                                <button type="button" data-type="ZKG" class="layui-btn layui-btn-warm layui-btn-sm addCFGs">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>

        <!-- HWK -->
        <div class="layui-form-item" style="position: relative">
            <label class="label-title2">HWK</label>

            <div class="containers"&