这次给大家带来jquery+ajax动态生成table步骤详解，jquery+ajax动态生成table的注意事项有哪些，下面就是实战案例，一起来看一下。
前言：
本示例大概功能是前台通过jquery的ajax调用一般处理程序(handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。
目标：
a 熟悉简单jquery ajax的使用
b 了解如何构造基本的json格式的数据（构建json也可以通过第三方的dll）
c 熟悉下handler的基本用法
1 简单效果图
2 前台代码
<%@ page language="c#" autoeventwireup="true" codefile="dialogajax.aspx.cs" inherits="jquerytest_dialogajax" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../jqueryui/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<script src="../jqueryui/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jqueryui/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#ptb
{
width:800px;
border:1px solid #aaa;
margin:0 auto;
}
.even{background:#cccccc;}
.odd{background:#ffffff;}
</style>
<script type="text/javascript">
//获取发布模块类型
function getmoduleinfo() {
$.ajax({
type: get,
datatype: json,
url: ../handler/testhandler.ashx?method=getmoduleinfo,
//data: { id: id, name: name },
success: function(json) {
var typedata = json.module;
$.each(typedata, function(i, n) {
var tbbody =
var trcolor;
if (i % 2 == 0) {
trcolor = even;
}
else {
trcolor = odd;
}
tbbody += <tr class='" + trcolor + "'><td> + n.modulenum + </td> + <td> + n.modulename + </td> + <td> + n.moduledes + </td></tr>;
$(#mytb).append(tbbody);
});
},
error: function(json) {
alert(加载失败);
}
});
}
$(function() {
getmoduleinfo();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p id="ptb">
<table id="mytb" style=" width:100%">
</table>
</p>
</form>
</body>
</html>
3 handler代码
<%@ webhandler language="c#" class="testhandler" %>
using system;
using system.web;
using system.collections.generic;
using system.text;
using datadal;
using dataenity;
public class testhandler : ihttphandler {
httprequest request;
httpresponse response;
public void processrequest (httpcontext context) {
//不让浏览器缓存
context.response.buffer = true;
context.response.expiresabsolute = datetime.now.adddays(-1);
context.response.addheader(pragma, no-cache);
context.response.addheader(cache-control, );
context.response.cachecontrol = no-cache;
context.response.contenttype = text/plain;
request = context.request;
response = context.response;
string method = request[method].tostring();
system.reflection.methodinfo methodinfo = this.gettype().getmethod(method);
methodinfo.invoke(this, null);
}
public void getmoduleinfo()
{
stringbuilder sb = new stringbuilder();
string jsondata = string.empty;
list<module> lsmodule = moduledal.getmodulelist();
sb.append({\module\:[);
for (int i = 0; i < lsmodule.count; i++)
{
jsondata = "{\"modulenum\":" + "\"" + lsmodule[i].modulenum + "\"" + ",\"modulename\":" + "\"" + lsmodule[i].modulename + "\"" + ",\"moduledes\":" + "\"" + lsmodule[i].moduledes + "\"" + "},";
sb.append(jsondata);
}
if (lsmodule.count > 0)
sb = sb.remove(sb.length - 1, 1);
sb.append(]});
response.write(sb);
}
public bool isreusable
{
get {
return false;
}
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery过滤方法filter()使用详解
jquery ligerui操作表格
以上就是jquery+ajax动态生成table步骤详解的详细内容。