动态增加表单元素并获取元素的text和value提交
时间:2022-05-06
本文章向大家介绍动态增加表单元素并获取元素的text和value提交,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以上是效果图
需求是这样的:
专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户。
这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识别的条件分别拼接并保存到数据库。专家可以点击 + 添加条件,多个条件之间是并且的关系。
问题的关键在于动态添加表单和如何获取表单的text和value分别根据要求进行拼接。
首先是添加表单,这个很简单:
$("#addform").click(function () {
//添加的内容
var addform = ' <div id="formpart" class="itemdiv layui-form-item">n' +
' <div class="layui-input-inline inheight" style="width: 10px;">n' +
' <label>并且:</label><br/>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">n' +
' <option value="" selected="selected">请选择影响因素</option>n' +
' <option value="leaf_temperature">叶面温度</option>n' +
' </select>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">n' +
' <option value="" selected="selected">请选择运算符号</option>n' +
' <option value=">">大于</option>n' +
' <option value="=">等于</option>n' +
' </select>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>n' +
' </div>n' +
' </div>';
$("#formpart").after($(addform));
//删除表单
$("#removeform").click(function () {
$("#addformbody").remove();
});
form.render();
});
然后是在提交的时候获取表单的所有的text和value进行拼接,由于这里使用的layui,他的select和显示并不在一起,具体见layui-select,这就给工作造成了很大的困难,这里就要用的next,eq(),children(),等等选择器。
思路就是每个追加的条件都是三个表单元素构成的,他们都在一个div中,根据这些div的相同的class获取到这些数据然后遍历每个div,在其中用各种选择器获取他们的text和value,进行拼接,发送给后台。
全部代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>智慧农业</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
</head>
<body>
<div style="margin: 15px;">
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 20px;">
<legend>添加</legend>
</fieldset>
<form id="addf" class="form-inline layui-form">
<div style="padding: 5px;border: 1px #b2b2b2 solid;width: 780px">
<div id="formpart" class="itemdiv layui-form-item">
<div class="layui-input-inline inheight" style="width: 10px;">
<label>条件:</label><br/>
</div>
<div class="layui-input-inline">
<select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">
<option value="" selected="selected">请选择影响因素</option>
<option value="leaf_temperature">叶面温度</option>
</select>
</div>
<div class="layui-input-inline">
<select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">
<option value="" selected="selected">请选择运算符号</option>
<option value=">">大于</option>
<option value="=">等于</option>
</select>
</div>
<div class="layui-input-inline">
<input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>
</div>
<div class="layui-btn" style="transform: translateY(0px);" id="addform">+</div>
<button class="layui-btn" lay-submit="" style="transform: translateY(0px);"
id="but_sub" lay-filter="formsub" >确认
</button>
</div>
</div>
</form>
</div>
<table id="tabledata" lay-filter="the_table" ></table>
</body>
<script>
layui.use(['table','layer','form'], function(){
var table = layui.table;
var layer = layui.layer ;
var laytpl = layui.laytpl;
var form = layui.form;
var $ = layui.$ ;
table.render({
elem: '#tabledata', //指定原始表格元素选择器(推荐id选择器)
url:"http://localhost:8081/itemlist?id=1",
page:true,
limits: [10,20,30],
limit: 10,
skin:'row',
even:true,
id:'the_table',
cols: [[
{field: 'id', title: 'id', width: '20%', align:'center',sort: true, },
{field: 'sop_id', title: 'SOP编号', width: '20%', align:'center',sort: true},
{field: 'condition_expert', title: '条件', width: '20%', align:'center',sort: true},
{field: 'condition_onenet', title: '动作', width: '19%', align:'center',sort: true},
{fixed: 'right',title:'工具栏', width:'19%', align:'center', toolbar: '#toolbtn'}
]]
});
table.on('tool(the_table)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'del'){
layer.confirm('确认删除么', function (index) {
$.ajax({
type: "post",
url: 'http://localhost:8081/itemdel?id=' + data.id,
data: {
id: data.id
},
dataType: "json",
sync: "false",
success: function (data) {
layer.msg(data.message);
},
error: function () {
}
})
table.reload("the_table");
});
}
});
$("#add_btn").click(function(){
layer.open({
type: 2,
title:['添加','font-size:22px'],
area: ['400px', '420px'],
content: '/additem',
cancel: function(index, layer){
table.reload("the_table");
}
});
});
form.on('submit(formsub)', function(data){
var $elements = $('.itemdiv');
var len = $elements.length;
var condition_expert='';
var condition_onenet='';
for(var i=0;i<len;i++){
var f=$(".itemdiv").eq(i).children().eq(1).children().eq(1).children().eq(0).children().eq(0).val();
var o=$(".itemdiv").eq(i).children().eq(2).children().eq(1).children().eq(0).children().eq(0).val();
var v=$(".f_val").eq(i).val();
var fv = $("select[name='factory']").eq(i).val();
var ov = $("select[name='operator']").eq(i).val();
if(i==0){
condition_expert=f+o+v;
condition_onenet='{'+fv+'}'+ov+v;
}else{
condition_expert=condition_expert+'并且'+f+o+v;
condition_onenet=condition_onenet+'&'+'{'+fv+'}'+ov+v;
}
}
if(len>1){
condition_onenet='('+condition_onenet+')';
}
console.log(condition_expert);
console.log(condition_onenet);
$.ajax({
url: 'http://localhost:8081/additem',
type : 'POST',
data : {
sop_id:1,
condition_expert:condition_expert,
condition_onenet:condition_onenet,
},
success : function(returndata) {
layui.layer.msg(returndata.message,{time: 666});
$('#addf')[0].reset();
table.reload("the_table");
},
error : function(returndata) {
layer.msg(returndata,{time: 666});
}
});
return false;
return false;
});
$("#addform").click(function () {
//添加的内容
var addform = ' <div id="formpart" class="itemdiv layui-form-item">n' +
' <div class="layui-input-inline inheight" style="width: 10px;">n' +
' <label>并且:</label><br/>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">n' +
' <option value="" selected="selected">请选择影响因素</option>n' +
' <option value="leaf_temperature">叶面温度</option>n' +
' </select>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">n' +
' <option value="" selected="selected">请选择运算符号</option>n' +
' <option value=">">大于</option>n' +
' <option value="=">等于</option>n' +
' </select>n' +
' </div>n' +
' <div class="layui-input-inline">n' +
' <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>n' +
' </div>n' +
' </div>';
$("#formpart").after($(addform));
//删除表单
$("#removeform").click(function () {
$("#addformbody").remove();
});
form.render();
});
var $ = layui.$, active = {
reload : function() {
var demoReload = $('#demoReload');
//执行重载
table.reload('the_table', {
page : {
curr : 1
//重新从第 1 页开始
},
where : {
name : demoReload.val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function() {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
<script type="text/html" id="toolbtn">
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</html>
- R语言 使用BP神经网络进行银行客户信用评估
- 使用R语言挖掘QQ群聊天记录
- 解析滴滴算法大赛---GBDT进行数据预测
- 数据迁移中的数据库检查和建议(r2笔记71天)
- 决策树案例:基于python的商品购买能力预测系统
- 数据迁移前的准备和系统检查 (r2笔记70天)
- 数据处理的统计学习(scikit-learn教程)
- 机器学习实战,使用朴素贝叶斯来做情感分析
- Python NLTK 处理原始文本
- 通过闪回事务查看数据dml的情况 (r2笔记69天)
- 通过shell和sql结合查找性能sql(r2笔记68天)
- 淘宝的评论归纳是用什么方法做到的?
- Python的机器学习实战:AadBoost
- 通过shell检查分区表中是否含有默认分区(r2笔记87天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Canvas系列(15):实战-小球拖拽
- Canvas系列(16):实战-小球与斜面碰撞
- Three.js教程(3):场景
- Three.js教程(4):相机
- 使用GithubActions自动部署应用到自己的服务器(ECS)
- Nuxt项目给script标签添加crossorigin属性
- Canvas系列(12):动画高级
- Canvas系列(13):实战--星空连线图
- VSCode支持Vue自动保存格式化的配置
- 构造方法或new返回该对象
- 使用Node在浏览器打开某个网页
- 快应用初探--把个人博客封装成快应用
- 10分钟开发一个npm全局依赖包(上)
- 10分钟开发一个npm全局依赖包(下)
- Canvas系列(3):路径与状态