1.前置方法

  1. $(function(){
  2.  ajaxT();
  3. });

2.AJAX

  1. #ajax
  2. function ajaxT(){
  3. $.ajax({
  4.   type:"POST",
  5.   dataType: "json",
  6.   url:"<%=basePath%>UserInfoServlet",
  7.   data:"doaction=userList",
  8.   success:function(data){
  9.   createShowingTable(data);
  10. }
  11. }
  12. );
  13. }

3.动态生成一个table

  1. //动态的创建一个table
  2. function createShowingTable(data) {
  3.  var tableStr = "<table class='tab-list' width='99%'>";
  4.  tableStr = tableStr
  5.    + "<tr class='list-header'>"
  6.    +"<td width='5%'>序号</td>"
  7.    +"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
  8.    +"<td width='30%'>用户姓名</td>"
  9.    +"<td width='20%'>工号</td>"
  10.    +"<td width='20%'>职位</td>"
  11.    +"<td width='20%'>创建时间</td>"
  12.    +"</tr>";
  13.  var len = data.length;
  14.  for ( var i = 0; i < len; i++) {
  15.   tableStr = tableStr + "<tr>"
  16.     +"<td>"+ (i+1) + "</td>"
  17.     +"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data[i].key+"' /></td>"
  18.     +"<td>"+ data[i].realName + "</td>"
  19.     + "<td>"+ data[i].userNo + "</td>"
  20.     + "<td>"+ data[i].position + "</td>"
  21.     +"<td>"+data[i].regTime+"</td>"
  22.     +"</tr>";
  23.  }
  24.  if(len==0){
  25.   tableStr = tableStr + "<tr style='text-align: center'>"
  26.   +"<td colspan='6'><font color='#cd0a0a'>"+ 暂无记录 + "</font></td>"
  27.   +"</tr>";
  28.  }
  29.   tableStr = tableStr + "</table>";

4.添加到DIV中

  1.  $("#tableAjax").html(tableStr);
  2. }