ajax动态生成table-2

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

[html] view plain copy

 

1. <table id="generatedTable" style ="border=2; display: none;">  
2.             <thead>  
3.                 <tr>  
4.                     <th style='width:10%;'>第一列</th>  
5.                     <th style='width:15%;'>第二列</th>  
6.                     <th style='width:10%;'>第三列</th>  
7.                     <th style='width:10%;'>第四列</th>                               
8.                     <th style='width:3%;'>第五列</th>                            
9.                 </tr>  
10.             </thead>  
11.             <tbody>  
12.                 <tr id="cloneTr">  
13.                    <td></td>  
14.                    <td></td>  
15.                    <td></td>  
16.                    <td></td>  
17.                   <td></td>           
18.                  </tr>  
19.              </tbody>  
20.  </table>                      

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

[javascript] view plain copy

 

1.    ajaxPost({  
2.          type:"GET",  
3.          url:"<c:url value='/logDetails.auth'/>",  
4.          data:"datas="+datas;//要发送的数据  
5.                                 
6.                  //object是后台传过来的java list数据集合  
7.                    success:function(objects){                         
8.                                         
9.                       //1,获取上面id为cloneTr的tr元素  
10.                           var tr = $("#cloneTr");  
11.   
12.                        $.each(objects, function(index,item){                              
13.                              //克隆tr，每次遍历都可以产生新的tr                              
14.                                var clonedTr = tr.clone();  
15.                                var _index = index;  
16.                               
17.                                //循环遍历cloneTr的每一个td元素，并赋值  
18.                                clonedTr.children("td").each(function(inner_index){  
19.                                   
20.                                       //根据索引为每一个td赋值  
21.                                             switch(inner_index){  
22.                                                   case(0):   
23.                                                      $(this).html(_index + 1);  
24.                                                      break;  
25.                                                   case(1):  
26.                                                      $(this).html(item.caller);  
27.                                                      break;  
28.                                                  case(2):  
29.                                                      $(this).html(item.imsi);  
30.                                                      break;  
31.                                                  case(3):  
32.                                                      $(this).html(item.imei);  
33.                                                      break;  
34.                                                  case(4):  
35.                                                      $(this).html(item.osid);  
36.                                                      break;  
37.                                 
38.                                            }//end switch                          
39.                             });//end children.each  
40.                           
41.                            //把克隆好的tr追加原来的tr后面  
42.                            clonedTr.insertAfter(tr);  
43.                         });//end $each  
44.                         $("#cloneTr").hide();//隐藏id=clone的tr，因为该tr中的td没有数据，不隐藏起来会在生成的table第一行显示一个空行  
45.                         $("#generatedTable").show();  
46.          }//end success  
47.     });//end ajaxpost