jquery ajax自動產生表格table(一)

首先在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                                       

如有好的方法，歡迎提出。共同探討和學習