AJax技术

jQuery ajax动态生成table功能示例

字号+ 作者:H5之家 来源:H5之家 2017-08-12 18:00 我要评论( )

jQuery ajax动态生成table功能示例-破洛洛教学网

本文实例讲述了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>"; tableStr = tableStr + "<tr>" +"<td>序号</td>" +"<td><input type='checkbox' /></td>" +"<td>用户姓名</td>" +"<td>工号</td>" +"<td>职位</td>" +"<td>创建时间</td>" +"</tr>"; var len = data.length; for ( var i = 0; i < len; i++) { tableStr = tableStr + "<tr>" +"<td>"+ (i+1) + "</td>" +"<td><input 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>" +"<td colspan='6'><font color='#cd0a0a'>"+ 暂无记录 + "</font></td>" +"</tr>"; } tableStr = tableStr + "</table>"; //添加到div中 $("#tableAjax").html(tableStr); }


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    2017-08-10 18:00

  • Jquery中ajax方法data参数的用法小结

    Jquery中ajax方法data参数的用法小结

    2017-08-07 18:00

  • jQuery ajaxComplete() 方法在 AJAX 请求完成时执行函数

    jQuery ajaxComplete() 方法在 AJAX 请求完成时执行函数

    2017-08-07 09:00

  • jQuery+ajax实现局部刷新的两种方法

    jQuery+ajax实现局部刷新的两种方法

    2017-08-04 17:00

网友点评