以上是效果图

需求是这样的：

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

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

问题的关键在于动态添加表单和如何获取表单的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>

动态增加表单元素并获取元素的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. 工作笔记--自动切换host的python code

    修改host代码: #coding:utf-8import os,timepwd = os.path.dirname(__file__) #获取当前文件夹的绝对路径pull_host_cmd = 'a ...

  2. 单元测试——Qunit

    为什么需要单元测试 正确性:测试可以验证代码的正确性,在上线前做到心里有底 自动化:当然手工也可以测试,通过console可以打印出内部信息,但是这是一次性的事情,下次测试还需要从头来过,效率不能得到 ...

  3. 变态的IE

    1.IE7及更早版本, unshift()方法总是返回undefined而不是数组的新长度.2.IE8及之前版本, 在catch语句中捕获的错误对象会被添加到执行环境的变量对象, 而不是catch语句 ...

  4. myeclispe中向mysql中插入中文数据出现??问题解决办法

    或许很多人会出现??这种令人头痛的mysql的中文乱码问题:解决如下: 1.先对于新建的数据库要设置默认的字符集为UTF-8 create database mydb default characte ...

  5. 2道acm简单题（2010）：1.猜数字游戏；2.字符串提取数字并求和；

    //第一题是猜数字的游戏.//题目:随即产生一个3位的正整数,让你进行猜数字,//如果猜小了,输出:"猜小了,请继续".//如果猜大了,输出:"猜大了,请继续" ...

  6. dfs练习

    不给提示,练习. 题意: 蒜头的数学实在是太差了,于是老师把他关到小黑屋让他闭门修炼.老师跟他一张纸,上面一排写着1, 2, 3...N这N个数,中间用空白分隔.老师让他在空白处填上加号或者减号.他让 ...

  7. typeahead + JDK 8 并行流 + redis 高速即时查询.

    感谢JDK8,让我们JAVA 程序员暂时不用担心失业. 有些情况,需要根据用户输入值,即时查询数据库,MYSQL显然不再适合这种业务. mongoDB看似最适合,但是为了这么一个破功能,也不值得特意去 ...

  8. WinSock WSAEventSelect 模型总结

    前言 本文配套代码:https://github.com/TTGuoying/WSAEventSelect-model 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理 ...

  9. SpringBoot项目在IntelliJ IDEA中实现热部署

    spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后再启动更快 ...

  10. Redis进阶实践之十四 Redis-cli命令行工具使用详解第一部分

    一.介绍       redis学了有一段时间了,以前都是看视频,看教程,很少看官方的东西.现在redis的东西要看的都差不多看完了.网上的东西也不多了.剩下来就看看官网的东西吧,一遍翻译,一遍测试. ...