前端，新增DIV，自增html片段代码实现，append、attr等方法

需求:

form表单提交，创建一个div，由button控制，可以自由增加div中input输入框等内容的输出。

样式

解析:点击增加，新增一个号段框和一个删除按钮，点击删除，可以删除这一行

代码

<div class="layui-fluid"><div class="layui-card"><div class="layui-card-header">库存录入</div><div class="layui-card-body" style="padding: 15px;"><form class="layui-form" action="" lay-filter="component-form-group"><!--模板基础信息 面板--><div class="layui-form-item"><div class="layui-card"><div class="layui-card-header layui-card-header-child">基础信息</div><div class="layui-card-body"><h1>删除大量无用代码</h1><div class="layui-form-item"><label class="layui-form-label">开卡状态</label><div class="layui-input-block"><input type="checkbox" name="isOpenCard" lay-skin="switch" value="1" lay-text="ON|OFF"></div></div><input type="hidden" name="iccidList" value=""><div style="clear: both"></div></div></div></div><!--模板内容 面板--><div class="layui-card"><div class="layui-card-header layui-card-header-child">ICCID</div><div class="layui-card-body"><div class="layui-form-item"><div class="layui-input-block"><input type="radio" name="number" lay-filter="levelM" value="1" title="号段导入" checked=""><button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" id="add_numbers" lay-filter="component-form-demo3">新增</button></div></div><p class="test-btn"></p><div class="layui-form-item"><div class="layui-input-block"><input type="radio" name="number" value="2" lay-filter="levelM" title="模板导入"></div></div><input type="hidden" name="iccid_list" id="iccid_list" value=""><div class="layui-form-item"><div class="layui-input-block"><div class="layui-btn"><input type="file" name="file" id="upload" value="2" disabled></div><a class="layui-btn" href="/static/example_data/导入库存示例表格.xlsx">下载示例表格</a></div></div><div style="clear: both"></div></div></div><div class="layui-form-item layui-layout-admin"><div class="layui-input-block"><div class="layui-footer" style="left: 0;"><button class="layui-btn" lay-submit="" lay-filter="component-form-demo2">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></div></form></div></div>
</div>
<style>.layui-card>.layui-card-header-child{background-color:#f2f2f2;font-weight: bold;}.layui-form>.layui-card{border: 1px solid #ebebeb;border-radius: 5px 5px 0 0;}.input-label-inline{padding: 9px 0;width: 98px;}.required-verify-label>span{color: #ff0000;}.field-flex>div{padding:0 150px}
</style>
<script src="__STATIC__/layuiadmin/layui/layui.js"></script>
<script>//删除-新增卡号字段function numberInto(obj){$(obj).parent().parent().remove();}
</script>
<script>layui.config({base: '__STATIC__/layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块}).use(['index', 'form', 'laydate','upload'], function () {var $ = layui.$,admin = layui.admin,element = layui.element,upload = layui.upload,layer = layui.layer,laydate = layui.laydate,form = layui.form;laydate.render({elem: '#silence_end_time' //指定元素});//指定允许上传的文件类型upload.render({elem: '#upload', url: '{:Url("uploadIccid")}', accept: 'file' //普通文件, exts: 'xls|excel|xlsx', done: function (res) {if (res != '') {$("#iccid_list").attr("value", res);layer.msg('上传成功');}}});form.on("radio(levelM)", function (data) {var status = data.value;if (this.value == '1') {//清除$("#upload").after($("#upload").clone().val(""));$("#upload").remove();//禁选$("#upload").attr("disabled","disabled");//活性治愈$("#add_numbers").attr("disabled",false);$('#add_numbers').removeClass("class").attr('class','layui-btn layui-btn-sm layui-btn-normal');//button删除置灰$(".del").attr("disabled",false);} else if (this.value == '2') {//清除$(".del").val('');$("#oaOrderId").val('');//禁选$("#add_numbers").attr("disabled","disabled");$('#add_numbers').removeClass("layui-btn-normal").attr('class','layui-btn-disabled');//置灰$(".del").attr("disabled","disabled");//活性治愈$("#upload").attr("disabled",false);}});form.on('select(operator)', function(data){let option = '<option>请选择</option>';$("#packageSeries").empty();$('#packageSeries').html(option);$("#mainPackage").empty();$('#mainPackage').html(option);$("#cardPrice").empty();$('#cardPrice').html(option);$("#cardType").val("全部");$("#makeCardCostType").val("全部");form.render("select");});//卡费计费form.on('select(makeCardCostType)', function(data){let  operator = $("#operatorName").find("option:selected").val();//data.value 得到被选中的值$.post('{:Url("admin/Repertory/cardPrice")}',{ 'data': {'id': data.value,'operatorId': operator} },function(data){let option = '<option>请选择</option>';if (data.data === ''){$('#cardPrice').html(option);}else{$.each(data.data,function (index,value) {option+='<option value="'+value['id']+'">'+value['originalPrice']+'</option>';})}$('#cardPrice').html(option);form.render("select");});});//获取套餐系列二级数据form.on('select(cardType)', function(data){//重置基础套餐let  operatorName = $("#operatorName").find("option:selected").val();//data.value 得到被选中的值$.post('{:Url("admin/Repertory/PackageSeriesCardType")}',{ 'data': {'packageType': data.value,'operatorId': operatorName} },function(data){let option = '<option>请选择</option>';if (data.data === ''){$('#packageSeries').html(option);}else{$.each(data.data,function (index,value) {option+='<option value="'+value['id']+'">'+value['seriesName']+'</option>';})}$('#packageSeries').html(option);form.render("select");});});//获取基础套餐三级数据form.on('select(packageSeries)', function(data){//data.value 得到被选中的值$.post('{:Url("admin/Repertory/MainPackage")}',{ 'data': {'packageSeriesId': data.value} },function(data){let option = '<option>请选择</option>';if (data.data === ''){$('#mainPackage').html(option);}else{$.each(data.data,function (index,value) {option+='<option value="'+value['id']+'">'+value['packageName']+'</option>';})}$('#mainPackage').html(option);form.render("select");});});$("#add_numbers").click(function(){let htmladd = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label"></label><div class="layui-input-inline"style="width: 240px;"><input type="text"name="start[]"placeholder="开始位"autocomplete="off"class="layui-input del"></div><div class="layui-form-mid">-</div><div class="layui-input-inline"style="width: 240px;"><input type="text"name="end[]"placeholder="结束位"autocomplete="off"class="layui-input del"></div><button class="layui-btn layui-btn-sm layui-btn-danger"lay-submit=" "lay-filter="component-form-demo3"οnclick="numberInto(this)">删除</button></div></div>';$(".test-btn").append(htmladd);return false;});form.on('select(billTotalId)', function(data){//data.value 得到被选中的值$.post('{:Url("getoperatorInfo")}',{ id: data.value },function(data){$("#operatorCity").val(data.operatorCity);$("#operatorName").val(data.operatorName);form.render("select");});});/* 监听提交 */form.on('submit(component-form-demo2)', function (data) {$.ajax({'url':'{:Url("admin/Repertory/add")}','data':JSON.stringify(data.field),'success':function(data){if (data.code === 1) {parent.layer.alert(data.msg,{title: '成功'});} else {parent.layer.alert(data.msg,{title: '失败'});}location.reload();},'dataType':'json',//返回的格式'type':'post',//发送的格式});return false;});});
</script>

最后

append、attr、removeClass等方法需要灵活使用

前端，新增DIV，自增html片段代码实现，append、attr等方法相关推荐

SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
java增删改查 jsp生成_jsp+servlet实现最简单的增删改查代码分享
话不多说,请看代码 package ceet.ac.cn.dao; import java.sql.Connection; import java.sql.PreparedStatement; imp ...
前端开发规范，你真的了解吗？一起来学习一下前端开发规范，让你的代码高级起来！
代码规范 1 编码风格规范 1.1 使用ES6风格编码源码定义变量使用let ,定义常量使用const 使用export ,import 模块化 1.2 组件 props 原子化提供默认值使用 ...
京东css3动画全屏海报_30个免费的CSS3动画片段代码
30个免费的CSS3动画片段代码 Sponsor 对于网页设计师来说,前端代码CSS/HTML不是强项,但有时候也是需要写的.特别是现在流行CSS3动画,学习和了解一些相关知识是必须的. CSS3动画 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 Wa ...
C#访问SQLite完整增删改查代码
以下代码都是经过我测试可用的: 一一个控制台示例 using System; using System.Data.SQLite;namespace SQLiteSamples {class Prog ...

前端，新增DIV，自增html片段代码实现，append、attr等方法

需求:

样式

代码

最后

前端，新增DIV，自增html片段代码实现，append、attr等方法相关推荐

最新文章

热门文章