ajax动态生成table

来源:互联网 发布:怎样做好淘宝才有生意 编辑:程序博客网 时间:2024/05/22 15:34

原文出处: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. }  

0 0
原创粉丝点击