js依据ajax查询结果,动态刷新页面----生成多行数据,并且每行数据点击按钮,可以执行对应的方法

html:

  <tbody  id="adminTbody">

                                      <c:forEach items="${contentModel3}" var="item">
                                    <tr class="myclass" >
                                       <c:forEach items="${item}" var="item2">

                                    <td style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis">${item2}</td>   
                                       </c:forEach> 
                                       <td> <a onclick="rentCar(this)"><span class="glyphicon glyphicon-search"></span>详情</a></td>
                                       </tr>
                                    </c:forEach>
                                </tbody> 

js

<script type="text/javascript">
var button = $("#submit");  
button.click(function(){ 

    var boxIds=[];
    var codvalue = document.getElementsByName("codvalue");
     var serializeJson = $("form").serializeArray();
    for(var i=0;i<codvalue.length;i++){
        boxIds.push(codvalue[i].value);
    }
     $.ajax({   
         type:"post",  
         url:'data',   //url为发送请求的地址
         traditional: true,
         dataType:"text",
         contentType:"application/json",                 
         data :JSON.stringify(boxIds), //提交一个查询的参数数组到后台 
         success:function(data){   
                $("#adminTbody").empty("");
                if($("#tableExcel tr").length==1){
                  var json = eval("("+data+")");
               var table = document.getElementById("tableExcel");
               var c=0;//返回了一个json数组需要把每一行提取出来,在生成一行
               for (var i   in json)//
                  {   //alert(json[i]);

                          var tr = document.createElement("tr");

                     for(var j   in json[i]){

                         var td = document.createElement("td");
                         td.style.border="1px solid #fff";
                         td.innerHTML = json[i][j];          
                         tr.appendChild(td);
                         table.appendChild(tr);

                    }
                    if(j==json[i].length-1){
                        var bt =document.createElement("button");  
                        bt.innerHTML = '详情'; 
                        bt.style.class="a_demo_two1";
                           bt.onclick = function rentCar(Obj) {                          //绑定点击事件
                               var str=$(this).parents("tr").find("td").eq(0).text();

                              window.location.href='/XXx/mconfig/details?str='+str;
                           };
                           tr.appendChild(bt);
                    }
                  }

                }else{
                    $("#tableExcel tr").not(':eq(0)').empty();
                    var json = eval("("+data+")"); 
                    var table = document.getElementById("tableExcel");
                       for (var i in json)
                       { 
                          var tr = document.createElement("tr");

                         for(var j=1 in json[i]){
                             var td = document.createElement("td");
                            td.style.border="1px solid #e6e6e6";
                             td.innerHTML = json[i][j];          
                             tr.appendChild(td);
                             table.appendChild(tr);
                         }
                         if(j=json[i].length-1){
                            var bt =document.createElement("button"); 
                              bt.style.width="50px"; 
                             bt.innerHTML = '详情'; 

                                bt.onclick = function rentCar(Obj) {                          //绑定点击事件
                                   var str=$(this).parents("tr").find("td").eq(0).text();

                                 window.location.href='/XXx/mconfig/details?str='+str;
                                };
                                tr.appendChild(bt);
                        }
                       }
                }
         }  
      });   
 });    
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值