ajax動態生成table

原文出處：http://franciswmf.iteye.com/blog/1895123

1. $(function(){  
2.     ajaxT();  
3. });  
4. function ajaxT(){   
5.     $.ajax({   
6.          type:"POST",   
7.          dataType: "json",   
8.          url:"<%=basePath%>UserInfoServlet",   
9.          data:"doaction=userList",   
10.          success:function(data){   
11.          createShowingTable(data);  
12. }  
13. }   
14. );   
15. }  
16. //動態的建立一個table  
17. function createShowingTable(data) {  
18.     var tableStr = "<table class='tab-list' width='99%'>";  
19.     tableStr = tableStr  
20.             + "<tr class='list-header'>"  
21.             +"<td width='5%'>序號</td>"  
22.             +"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"  
23.             +"<td width='30%'>使用者姓名</td>"  
24.             +"<td width='20%'>工號</td>"  
25.             +"<td width='20%'>職位</td>"  
26.             +"<td width='20%'>建立時間</td>"  
27.             +"</tr>";  
28.     var len = data.length;  
29.     for ( var i = 0; i < len; i++) {  
30.         tableStr = tableStr + "<tr>"  
31.                 +"<td>"+ (i+1) + "</td>"   
32.                 +"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data[i].key+"' /></td>"  
33.                 +"<td>"+ data[i].realName + "</td>"  
34.                 + "<td>"+ data[i].userNo + "</td>"  
35.                 + "<td>"+ data[i].position + "</td>"  
36.                 +"<td>"+data[i].regTime+"</td>"  
37.                 +"</tr>";  
38.     }  
39.     if(len==0){  
40.         tableStr = tableStr + "<tr style='text-align: center'>"  
41.         +"<td colspan='6'><font color='#cd0a0a'>"+ 暫無記錄 + "</font></td>"  
42.         +"</tr>";  
43.     }  
44.     tableStr = tableStr + "</table>";  
45.     //新增到div中  
46.     $("#tableAjax").html(tableStr);  
47. }