Sharing examples of jQuery's ajax dynamically generated table function

This article mainly introduces the function of jQuery ajax to dynamically generate tables, and analyzes the related operation skills of jQuery to dynamically create tables based on ajax data interaction based on specific examples. Friends who need it can refer to it. I hope it can help everyone.

$(function(){
ajaxT();
});
function ajaxT(){
$.ajax({
  type:"POST",
  dataType: "json",
  url:"<%=basePath%>UserInfoServlet",
  data:"doaction=userList",
  success:function(data){
  createShowingTable(data);
}
}
);
}
//动态的创建一个table
function createShowingTable(data) {
var tableStr = "<table class=&#39;tab-list&#39; width=&#39;99%&#39;>";
tableStr = tableStr
  + "<tr class=&#39;list-header&#39;>"
  +"<td width=&#39;5%&#39;>序号</td>"
  +"<td width=&#39;5%&#39;><input id=&#39;checkAll&#39; name=&#39;checkAll&#39; type=&#39;checkbox&#39; /></td>"
  +"<td width=&#39;30%&#39;>用户姓名</td>"
  +"<td width=&#39;20%&#39;>工号</td>"
  +"<td width=&#39;20%&#39;>职位</td>"
  +"<td width=&#39;20%&#39;>创建时间</td>"
  +"</tr>";
var len = data.length;
for ( var i = 0; i < len; i++) {
 tableStr = tableStr + "<tr>"
   +"<td>"+ (i+1) + "</td>"
   +"<td><input class=&#39;check&#39; id=&#39;checkOne&#39; name=&#39;checkOne&#39; type=&#39;checkbox&#39; value=&#39;"+data[i].key+"&#39; /></td>"
   +"<td>"+ data[i].realName + "</td>"
   + "<td>"+ data[i].userNo + "</td>"
   + "<td>"+ data[i].position + "</td>"
   +"<td>"+data[i].regTime+"</td>"
   +"</tr>";
}
if(len==0){
 tableStr = tableStr + "<tr style=&#39;text-align: center&#39;>"
 +"<td colspan=&#39;6&#39;><font color=&#39;#cd0a0a&#39;>"+ 暂无记录 + "</font></td>"
 +"</tr>";
}
tableStr = tableStr + "</table>";
//添加到p中
$("#tableAjax").html(tableStr);
}

Related recommendations:

Sample analysis of php dynamically generating objects based on string class names

Asp for dynamically generating HTML forms. net method code example

js Dynamically generate html trigger event parameter character escaping example

The above is the detailed content of Sharing examples of jQuery's ajax dynamically generated table function. For more information, please follow other related articles on the PHP Chinese website!