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">#divTb{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"><div id="divTb"><table id="myTb" style=" width:100%"></table></div></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 Ajax动态生成Table表格的内容就全部完成了，希望对大家有所帮助。