• 动态循环插入<option>,鼠标点击从数据库调取data


    1. 针对问题

    1) 在html页面动态循环插入从数据库调取过来的value值,插入<option>value</option>;

    2)   鼠标点击value值,获取对应的数据库信息;

    2. 解决办法

    1)option的循环插入

     <select id="sensorNumFilterInput" name="sensorNumFilterInput" style=" 110px;">
       <option id="PresensorNumFilterInput" value="">输入编号</option>                                                                      
     </select>
        // 气压传感器循环插入编号名单
        function PreNameOption(){
            $.ajax({ 
                url : "http://localhost:8080/tianjin-ssms-meach/Pre_tableNameServlet", 
                type : "post", 
                success : function(PreTableName)
                {    
                    var  dataPreTableName = eval(PreTableName); 
                      $('#sensorNumFilterInput').empty();
               for(i=0;i<dataPreTableName.length;i++){                                                                
                            $("#sensorNumFilterInput ").append('<option id="'+i+'">'+dataPreTableName[i]+'</option>');//写入表格数据 
                        }  
                          }                 
            });
        }

    ps:option 里面的id随着for 循环依次增加;

    2) 点击value,获取对应的数据库信息;

        //获取点击的传感器编号,进一步得到数据
        function text(){
            var obj = document.getElementById("sensorNumFilterInput"); //获取客户端输入的值
            var Sensortxt = obj.options[obj.selectedIndex].text;
            if(Sensortxt[0]=="p"){
                Sensortxt = "P"+ Sensortxt[1]+ Sensortxt[2]+ Sensortxt[3]+ Sensortxt[4]+ Sensortxt[5]+ Sensortxt[6];
            }
            //如果到时候添加温度 湿度 根据第一个字母,switch case 就OK了
            $.ajax({ 
                url : "http://localhost:8080/tianjin-ssms-meach/Pre_checkDataServlet?Pre_checkName="+Sensortxt+"", //此值赋给dopost里面的变量
                type : "post", 
                success : function(Pre)//所有气压传感器数据
                {    
                  var data = eval(Pre); 
                   for(i=0;i<data.length;i++){
                     if(data[i].name == Sensortxt){
                             var tbody='<tr>'
                              tbody= tbody+'<td>'+data[i].time+'</td>'+'<td id="n2">'+data[i].name+'</td>'+'<td>'+data[i].num+'</td>'+'<td>'+data[i].set_temp+'</td>'
                                    +'<td>'+data[i].set_pre+'</td>'+'<td>'+data[i].collect_temp+'</td>'+'<td>'+data[i].collect_pre+'</td>'+'<td>'+data[i].measure_temp+'</td>'
                                    +'<td>'+data[i].measure_pre+'</td>'+'<td>'+data[i].temp_org+'</td>'+'<td>'+data[i].pre_org+'</td>'  //展现在前端页面上
                              tbody = tbody+'</tr>'
                              $("#originalDataInfoQueryTable tbody").append(tbody);//写入表格数据 
                     }                     
                    } 
                }
            });
        }

      

  • 相关阅读:
    elemen-ui表格多选,分页保持勾选状态的实现
    element-ui中的change事件传递多个参数的方法
    vue中访问不存在路由默认跳转404页面实现方法
    IntelliJ IDEA 汉化包
    vue 移动端项目用手机预览调试
    vue 中使用 rem
    vue中配置axios.js文件,发送请求
    vue中axios的使用
    爬楼梯
    不同路径
  • 原文地址:https://www.cnblogs.com/lwcwj/p/13037795.html
Copyright © 2020-2023  润新知