以上是效果图

需求是这样的：

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

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

问题的关键在于动态添加表单和如何获取表单的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. .Net Core和jexus配置HTTPS服务

    花了几天时间,看了好多篇博客,终于搞定了网站的HTTPS服务,借此写篇博客,来让有需要的朋友少走弯路. 一.环境介绍 1.Linux下在Docker容器中部署好了一个网站,该网站需要通过外部提供程序访 ...

  2. 案例分析——BAT业务https化经历

         一.前言      通常的http访问会遭到中间人攻击.网络嗅探等普通用户感知不到的恶意行为,这些行为会篡改用户浏览页面引导用户访问非法网站.抓取用户的上网行为以及个人信息.严重的会造成用户 ...

  3. python 列表去重(数组)的几种方法(转)

    一.方法1  代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids:     if id not in news_id ...

  4. PowerDesigner Constraint name uniqueness 问题处理（转载）

    使用PowerDesigner生成数据库脚本时报 Constraint name uniqueness 错误: 双击每行错误,发现外键引用的名字有重复的: 惯性去网上找解决办法,找到的主要是两个方法: ...

  5. ASP.NET Core 使用 URL Rewrite 中间件实现 HTTP 重定向到 HTTPS

    在传统 ASP.NET 程序中,我们可以通过配置 IIS 的“URL 重写”功能实现将 HTTP 请求重定向为 HTTPS .但是该方法在 ASP.NET Core 应用中不再工作.在 ASP.NET ...

  6. 关于springMVC中component-scan的问题以及springmvc.xml整理

    关于springMVC中component-scan的问题以及springmvc.xml整理 一.component-scan问题和解决办法         最近在学习使用springMVC+myba ...

  7. HDU - 1907 John 反Nimm博弈

    思路: 注意与Nimm博弈的区别,谁拿完谁输! 先手必胜的条件: 1.  每一个小游戏都只剩一个石子了,且SG = 0. 2. 至少有一堆石子数大于1,且SG不等于0 证明:1. 你和对手都只有一种选 ...

  8. react——一个todolist的demo

    代码如下: function ToDoListHeader(props) { return <h1 className={props.className}>ToDoList</h1& ...

  9. SIFT解析（三）生成特征描述子

    以上两篇文章中检测在DOG空间中稳定的特征点,lowe已经提到这些特征点是比Harris角点等特征还要稳定的特征.下一步骤我们要考虑的就是如何去很好地描述这些DOG特征点. 下面好好说说如何来描述这些 ...

  10. 吾八哥学Selenium(四)：操作下拉框select标签的方法

    我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...