當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/1/1 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 layui模板引擎做动态增加和减少表单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果顯示

目錄結構

代碼

<!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"></i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="remove{{ index }}" lay-submit ><i class="layui-icon">ဆ</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>

總結

以上是生活随笔為你收集整理的layui模板引擎做动态增加和减少表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。