layui模板引擎做动态增加和减少表单

最新推荐文章于 2024-07-22 17:54:08 发布

梦想与想象-广州大智汇

最新推荐文章于 2024-07-22 17:54:08 发布

阅读量1.2k

点赞数 1

文章标签： layui javascript html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u014617119/article/details/120619977

版权

这个示例展示了如何使用layui库动态插入和删除表单元素，实现古代四大美人的填空题。用户可以输入答案，并通过添加和删除按钮动态调整表单项。代码中包含了jQuery和layui库的引用，以及表单渲染和事件监听的实现。

摘要由CSDN通过智能技术生成

效果显示

目录结构

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>

    <form class="layui-form" id="form">
        <div class="layui-form-item">
            <div class="layui-form-mid">1、古代四大美人？</div>
        </div>

        <div id="view"></div>

    </form>


    <script id="demo" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
            <div class="layui-form-item">
                <label class="layui-form-label">{{ item.name }}</label>
                <div class="layui-input-inline">
                    <input type="text" name="{{ item.name }}" id="con-{{ index }}"  placeholder="请输入答案" autocomplete="off" class="layui-input" value="{{item.value}}">
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="add{{ index }}" lay-submit >
                      <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="remove{{ index }}" lay-submit >
                      <i class="layui-icon">&#x1006;</i>
                    </button>
                    </button>
                  </div>
                
            </div>
        {{#  }); }}
</script>




    <script>



        layui.use(['form', 'laytpl'], function () {
            var laytpl = layui.laytpl, form = layui.form;

            // 渲染数据封装
            function insert_(d) {
                var data = { //数据
                    "title": "题目",
                    "list": d
                }
                var getTpl = demo.innerHTML
                    , view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
            }

            var list_arr = [{ "name": "A", "value": "" }];
            var list_key = [];
            var list_value = [];

            //  渲染模板
            insert_(list_arr);
            
			//增加
            for (let index = 0; index < 26; index++) {
                form.on('submit(add' + index + ')', function (data) {

                    var arr = $('#form').serializeArray();
                    if (arr.length == 26) {
                        layer.msg('不能再增加了！')
                        return false;
                    }
                    for (let i = 0; i < arr.length; i++) {
                        if (index < i) {
                            list_key[i + 1] = String.fromCharCode(arr[i].name.charCodeAt(0) + 1);
                            list_value[i + 1] = arr[i].value;
                        } else {
                            list_key[index + 1] = String.fromCharCode(arr[index].name.charCodeAt(0) + 1);
                            list_key[i] = arr[i].name;
                            list_value[index + 1] = '';
                            list_value[i] = arr[i].value;
                        }
                    }

                    var count = list_arr.length;
                    for (let k = 0; k <= count; k++) {
                        if (k < count) {
                            list_arr[k].name = list_key[k];
                            list_arr[k].value = list_value[k];
                        } else if (k == count) {
                            list_arr[k] = { "name": list_key[k], "value": list_value[k] };
                        }
                    }
                    // 重新渲染
                    insert_(list_arr);

                });

				//减少
                form.on('submit(remove' + index + ')', function (data) {
                    var arr = $('#form').serializeArray();
                    if (arr.length == 1) {
                        layer.msg('不能再减少了！')
                        return false;
                    }
                    for (let i = 0; i < arr.length; i++) {
                        if (index < i) {
                            list_key[i - 1] = String.fromCharCode(arr[i].name.charCodeAt(0) - 1);
                            list_value[i - 1] = arr[i].value;
                        } else {
                            list_key[i] = arr[i].name;
                            list_value[i] = arr[i].value;
                        }
                    }

                    var count = list_arr.length;
                    for (let k = 0; k < count; k++) {
                        list_arr[k].name = list_key[k];
                        list_arr[k].value = list_value[k];
                    }
                    // 去掉最后一位
                    list_arr = list_arr.slice(0, -1);
                    // 重新渲染
                    insert_(list_arr);

                });
            }

        });





    </script>






</body>

</html>