以上是效果图

需求是这样的：

专家设置好条件，然后设备检测到达到相应的条件之后，设备发出提醒给用户。

这就需要专家设置好能看懂的条件之后，然后把给专家看的，正常人能看懂的条件和发送的设备的，设备能够识别的条件分别拼接并保存到数据库。专家可以点击 + 添加条件，多个条件之间是并且的关系。

问题的关键在于动态添加表单和如何获取表单的text和value分别根据要求进行拼接。

首先是添加表单，这个很简单：

  1.         $("#addform").click(function () {
  2.             //添加的内容
  3.                var addform = '            <div id="formpart" class="itemdiv layui-form-item">\n' +
  4.                 '                <div class="layui-input-inline inheight" style="width: 10px;">\n' +
  5.                 '                    <label>并且：</label><br/>\n' +
  6.                 '                </div>\n' +
  7.                 '                <div class="layui-input-inline">\n' +
  8.                 '                    <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">\n' +
  9.                 '                        <option value="" selected="selected">请选择影响因素</option>\n' +
  10.                 '                        <option value="leaf_temperature">叶面温度</option>\n' +
  11.                 '                    </select>\n' +
  12.                 '                </div>\n' +
  13.                 '                <div class="layui-input-inline">\n' +
  14.                 '                    <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">\n' +
  15.                 '                        <option value="" selected="selected">请选择运算符号</option>\n' +
  16.                 '                        <option value=">">大于</option>\n' +
  17.                 '                        <option value="=">等于</option>\n' +
  18.                 '                    </select>\n' +
  19.                 '                </div>\n' +
  20.                 '                <div class="layui-input-inline">\n' +
  21.                 '                    <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>\n' +
  22.                 '                </div>\n' +
  23.                 '            </div>';
  24.             $("#formpart").after($(addform));
  25.             //删除表单
  26.             $("#removeform").click(function () {
  27.                 $("#addformbody").remove();
  28.             });
  29.             form.render();
  30.         });

然后是在提交的时候获取表单的所有的text和value进行拼接，由于这里使用的layui，他的select和显示并不在一起，具体见layui-select，这就给工作造成了很大的困难，这里就要用的next，eq()，children()，等等选择器。

思路就是每个追加的条件都是三个表单元素构成的，他们都在一个div中，根据这些div的相同的class获取到这些数据然后遍历每个div，在其中用各种选择器获取他们的text和value，进行拼接，发送给后台。

全部代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>智慧农业</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <script type="text/javascript"  src="js/jquery-1.12.4.min.js"></script>
  7.     <script src="layui/layui.js" charset="utf-8"></script>
  8.     <link rel="stylesheet" href="layui/css/layui.css"  media="all" />
  9.  
  10. </head>
  11. <body>
  12. <div style="margin: 15px;">
  13.     <fieldset class="layui-elem-field layui-field-title"
  14.               style="margin-top: 20px;">
  15.         <legend>添加</legend>
  16.     </fieldset>
  17.     <form id="addf" class="form-inline layui-form">
  18.         <div style="padding: 5px;border: 1px #b2b2b2 solid;width: 780px">
  19.             <div id="formpart" class="itemdiv layui-form-item">
  20.                 <div class="layui-input-inline inheight" style="width: 10px;">
  21.                     <label>条件：</label><br/>
  22.                 </div>
  23.                 <div class="layui-input-inline">
  24.                     <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">
  25.                         <option value="" selected="selected">请选择影响因素</option>
  26.                         <option value="leaf_temperature">叶面温度</option>
  27.                     </select>
  28.                 </div>
  29.                 <div class="layui-input-inline">
  30.                     <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">
  31.                         <option value="" selected="selected">请选择运算符号</option>
  32.                         <option value=">">大于</option>
  33.                         <option value="=">等于</option>
  34.                     </select>
  35.                 </div>
  36.                 <div class="layui-input-inline">
  37.                     <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>
  38.                 </div>
  39.                 <div class="layui-btn" style="transform: translateY(0px);" id="addform">+</div>
  40.  
  41.                 <button class="layui-btn" lay-submit="" style="transform: translateY(0px);"
  42.                         id="but_sub" lay-filter="formsub" >确认
  43.                 </button>
  44.             </div>
  45.         </div>
  46.  
  47.     </form>
  48. </div>
  49. <table id="tabledata" lay-filter="the_table" ></table>
  50. </body>
  51. <script>
  52.     layui.use(['table','layer','form'], function(){
  53.         var table = layui.table;
  54.         var layer = layui.layer ;
  55.         var laytpl = layui.laytpl;
  56.         var form = layui.form;
  57.         var $ = layui.$ ;
  58.  
  59.         table.render({
  60.             elem: '#tabledata', //指定原始表格元素选择器（推荐id选择器）
  61.             url:"http://localhost:8081/itemlist?id=1",
  62.             page:true,
  63.             limits: [10,20,30],
  64.             limit: 10,
  65.             skin:'row',
  66.             even:true,
  67.             id:'the_table',
  68.             cols: [[
  69.                 {field: 'id', title: 'id', width: '20%', align:'center',sort: true, },
  70.                 {field: 'sop_id', title: 'SOP编号', width: '20%', align:'center',sort: true},
  71.                 {field: 'condition_expert', title: '条件', width: '20%', align:'center',sort: true},
  72.                 {field: 'condition_onenet', title: '动作', width: '19%', align:'center',sort: true},
  73.                 {fixed: 'right',title:'工具栏', width:'19%', align:'center', toolbar: '#toolbtn'}
  74.             ]]
  75.         });
  76.  
  77.         table.on('tool(the_table)', function(obj){
  78.             var data = obj.data; //获得当前行数据
  79.             var layEvent = obj.event; //获得 lay-event 对应的值
  80.             var tr = obj.tr; //获得当前行 tr 的DOM对象
  81.  
  82.             if(layEvent === 'del'){
  83.                 layer.confirm('确认删除么', function (index) {
  84.                     $.ajax({
  85.                         type: "post",
  86.                         url: 'http://localhost:8081/itemdel?id=' + data.id,
  87.                         data: {
  88.                             id: data.id
  89.                         },
  90.                         dataType: "json",
  91.                         sync: "false",
  92.                         success: function (data) {
  93.                             layer.msg(data.message);
  94.                         },
  95.                         error: function () {
  96.                         }
  97.                     })
  98.                     table.reload("the_table");
  99.                 });
  100.             }
  101.         });
  102.  
  103.         $("#add_btn").click(function(){
  104.             layer.open({
  105.                 type: 2,
  106.                 title:['添加','font-size:22px'],
  107.                 area: ['400px', '420px'],
  108.                 content: '/additem',
  109.                 cancel: function(index, layer){
  110.                     table.reload("the_table");
  111.                 }
  112.             });
  113.         });
  114.  
  115.                    form.on('submit(formsub)', function(data){
  116.               var $elements = $('.itemdiv');
  117.             var len = $elements.length;
  118.             var condition_expert='';
  119.             var condition_onenet='';
  120.             for(var i=0;i<len;i++){
  121.                 var f=$(".itemdiv").eq(i).children().eq(1).children().eq(1).children().eq(0).children().eq(0).val();
  122.                 var o=$(".itemdiv").eq(i).children().eq(2).children().eq(1).children().eq(0).children().eq(0).val();
  123.                 var v=$(".f_val").eq(i).val();
  124.  
  125.                 var fv = $("select[name='factory']").eq(i).val();
  126.                 var ov = $("select[name='operator']").eq(i).val();
  127.                 if(i==0){
  128.                     condition_expert=f+o+v;
  129.                     condition_onenet='{'+fv+'}'+ov+v;
  130.                 }else{
  131.                     condition_expert=condition_expert+'并且'+f+o+v;
  132.                     condition_onenet=condition_onenet+'&'+'{'+fv+'}'+ov+v;
  133.                 }
  134.             }
  135.             if(len>1){
  136.                 condition_onenet='('+condition_onenet+')';
  137.             }
  138.             console.log(condition_expert);
  139.             console.log(condition_onenet);
  140.  
  141.             $.ajax({
  142.                 url: 'http://localhost:8081/additem',
  143.                 type : 'POST',
  144.                 data : {
  145.                     sop_id:1,
  146.                     condition_expert:condition_expert,
  147.                     condition_onenet:condition_onenet,
  148.                 },
  149.                 success : function(returndata) {
  150.                     layui.layer.msg(returndata.message,{time: 666});
  151.                     $('#addf')[0].reset();
  152.                     table.reload("the_table");
  153.                 },
  154.                 error : function(returndata) {
  155.                     layer.msg(returndata,{time: 666});
  156.                 }
  157.             });
  158.             return false;
  159.               return false;
  160.             });
  161.  
  162.         $("#addform").click(function () {
  163.             //添加的内容
  164.                var addform = '            <div id="formpart" class="itemdiv layui-form-item">\n' +
  165.                 '                <div class="layui-input-inline inheight" style="width: 10px;">\n' +
  166.                 '                    <label>并且：</label><br/>\n' +
  167.                 '                </div>\n' +
  168.                 '                <div class="layui-input-inline">\n' +
  169.                 '                    <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">\n' +
  170.                 '                        <option value="" selected="selected">请选择影响因素</option>\n' +
  171.                 '                        <option value="leaf_temperature">叶面温度</option>\n' +
  172.                 '                    </select>\n' +
  173.                 '                </div>\n' +
  174.                 '                <div class="layui-input-inline">\n' +
  175.                 '                    <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">\n' +
  176.                 '                        <option value="" selected="selected">请选择运算符号</option>\n' +
  177.                 '                        <option value=">">大于</option>\n' +
  178.                 '                        <option value="=">等于</option>\n' +
  179.                 '                    </select>\n' +
  180.                 '                </div>\n' +
  181.                 '                <div class="layui-input-inline">\n' +
  182.                 '                    <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>\n' +
  183.                 '                </div>\n' +
  184.                 '            </div>';
  185.             $("#formpart").after($(addform));
  186.             //删除表单
  187.             $("#removeform").click(function () {
  188.                 $("#addformbody").remove();
  189.             });
  190.             form.render();
  191.         });
  192.  
  193.         var $ = layui.$, active = {
  194.             reload : function() {
  195.                 var demoReload = $('#demoReload');
  196.  
  197.                 //执行重载
  198.                 table.reload('the_table', {
  199.                     page : {
  200.                         curr : 1
  201.                         //重新从第 1 页开始
  202.                     },
  203.                     where : {
  204.                         name : demoReload.val()
  205.                     }
  206.                 });
  207.             }
  208.         };
  209.  
  210.         $('.demoTable .layui-btn').on('click', function() {
  211.             var type = $(this).data('type');
  212.             active[type] ? active[type].call(this) : '';
  213.         });
  214.  
  215.     });
  216. </script>
  217. <script type="text/html" id="toolbtn">
  218.     <a  class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  219. </script>
  220. </html>

动态增加表单元素并获取元素的text和value提交的更多相关文章

  1. js：表单校验（获取元素、事件）

    1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...

  2. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  3. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  4. HTML笔记（五）表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  5. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. selenium常用命令--操作页面元素及获取元素内容整理

    selenium常用命令之操作页面元素及获取元素内容的事件整理 例子:  /**id <input type="text" id="phone" name ...

  7. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  8. javascript根据元素自定义属性获取元素，操作元素

    写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...

  9. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

随机推荐

  1. python学习：递归列出目录里的文件

    #!/usr/bin/python   import os import sys   def print_files(path):     lsdir = os.listdir(path)     d ...

  2. [bzoj4552][Tjoi2016&Heoi2016]排序-二分+线段树

    Brief Description DZY有一个数列a[1..n],它是1∼n这n个正整数的一个排列. 现在他想支持两种操作: 0, l, r: 将a[l..r]原地升序排序. 1, l, r: 将a ...

  3. 基于数据形式说明杜兰特的技术特点的分析（含Python实现讲解部分）

    ---恢复内容开始--- 注: 本博文系原创,转载请标明原处. 题外话:春节过后,回到学校无所事事,感觉整个人都生锈一般,没什么动力,姑且称为"春节后遗症".在科赛官网得到关于NB ...

  4. 【CF 678F】Lena and Queries

    Time Limit: 2000 ms   Memory Limit: 512 MB Description 初始有一个空集合 n个操作 有三种操作,如下: 1 a b 表示向集合中插入二元组(a,b ...

  5. http协议——cookie详解

    http是无状态的,所以引入了cookie来管理服务器与客户端之间的状态 与cookie相关的http首部字段有: 1.Set-Cookie:它一个响应首部字段,从服务器发送到客户端,当服务器想开始通 ...

  6. 将DataSet转化成XML格式的String类型,再转化回来。

    /// <summary> /// 获取DataSet的Xml格式 /// </summary> public static string GetDataSetXml(this ...

  7. 转载微信公众号 测试那点事：Jmeter乱码解决

    原文地址: http://mp.weixin.qq.com/s/4Li5z_-rT0HPPQx9Iyi5UQ  中文乱码一直都是比较让人棘手的问题,我们在使用Jmeter的过程中,也会遇到中文乱码问题 ...

  8. R+OCR︱借助tesseract包实现图片文本提取功能

    2016年11月,Jeroen Ooms在CRAN发布了tesseract包,实现了R语言对简单图片的文本提取.分析功能. 利用开源OCR引擎进行图片处理,目前可以识别超过100种语言,R语言可以借助 ...

  9. R语言︱H2o深度学习的一些R语言实践——H2o包

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- R语言H2o包的几个应用案例 笔者寄语:受启发 ...

  10. Hidden Markov Models(HMM) 初理解

    1. 一个简单例子