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

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

			
				
					第一列
					第二列
					第三列
					第四列								
					第五列							
				
			
			
			    
				   
 				   
				   
				   
 				  			
			     
			 
   		           

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

   ajaxPost({
		 type:"GET",
		 url:"",
		 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