jQuery ajax动态生成table功能示例
程序员文章站
2022-04-10 11:38:54
本文实例讲述了jquery ajax动态生成table的方法。分享给大家供大家参考,具体如下:
$(function(){
ajaxt();
});
fu...
本文实例讲述了jquery ajax动态生成table的方法。分享给大家供大家参考,具体如下:
$(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='tab-list' width='99%'>"; tablestr = tablestr + "<tr class='list-header'>" +"<td width='5%'>序号</td>" +"<td width='5%'><input id='checkall' name='checkall' type='checkbox' /></td>" +"<td width='30%'>用户姓名</td>" +"<td width='20%'>工号</td>" +"<td width='20%'>职位</td>" +"<td width='20%'>创建时间</td>" +"</tr>"; var len = data.length; for ( var i = 0; i < len; i++) { tablestr = tablestr + "<tr>" +"<td>"+ (i+1) + "</td>" +"<td><input class='check' id='checkone' name='checkone' type='checkbox' value='"+data[i].key+"' /></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='text-align: center'>" +"<td colspan='6'><font color='#cd0a0a'>"+ 暂无记录 + "</font></td>" +"</tr>"; } tablestr = tablestr + "</table>"; //添加到div中 $("#tableajax").html(tablestr); }
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery操作json数据技巧汇总》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。