jquery ajax自动生成表格table(一)

最新推荐文章于 2022-11-23 23:15:24 发布

郭梧悠

最新推荐文章于 2022-11-23 23:15:24 发布

阅读量3.6w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/chunqiuwei/article/details/10160587

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先在jsp页面设定一个table骨架,首先把该table的display属性设置为none，这样在加载页面的时候就不会显示出来，代码如下

<table id="generatedTable" style ="border=2; display: none;">
			<thead>
				<tr>
					<th style='width:10%;'>第一列</th>
					<th style='width:15%;'>第二列</th>
					<th style='width:10%;'>第三列</th>
					<th style='width:10%;'>第四列</th>								
					<th style='width:3%;'>第五列</th>							
				</tr>
			</thead>
			<tbody>
			    <tr id="cloneTr">
				   <td></td>
 				   <td></td>
				   <td></td>
				   <td></td>
 				  <td></td>			
			     </tr>
			 </tbody>
 </table>

然后根据这个骨架用ajax来把动态生成table的各个行，并把后台数据添加到table中

   ajaxPost({
		 type:"GET",
		 url:"<c:url value='/logDetails.auth'/>",
		 data:"datas="+datas;//要发送的数据
                              
                 //object是后台传过来的java list数据集合
                   success:function(objects){                       
                                      
                      //1,获取上面id为cloneTr的tr元素
                          var tr = $("#cloneTr");

                       $.each(objects, function(index,item){                            
                             //克隆tr，每次遍历都可以产生新的tr                            
                               var clonedTr = tr.clone();
                               var _index = index;
                            
                               //循环遍历cloneTr的每一个td元素，并赋值
                               clonedTr.children("td").each(function(inner_index){
                                
                                      //根据索引为每一个td赋值
                                            switch(inner_index){
                                                  case(0): 
                                                     $(this).html(_index + 1);
                                                     break;
                                                  case(1):
                                                     $(this).html(item.caller);
                                                     break;
                                                 case(2):
                                                     $(this).html(item.imsi);
                                                     break;
                                                 case(3):
                                                     $(this).html(item.imei);
                                                     break;
                                                 case(4):
                                                     $(this).html(item.osid);
                                                     break;
                              
                                           }//end switch                        
                            });//end children.each
                        
                           //把克隆好的tr追加原来的tr后面
                           clonedTr.insertAfter(tr);
                        });//end $each
                        $("#cloneTr").hide();//隐藏id=clone的tr，因为该tr中的td没有数据，不隐藏起来会在生成的table第一行显示一个空行
                        $("#generatedTable").show();
         }//end success
    });//end ajaxpost