ajax动态更新表格,JQuery Ajax动态生成Table表格

前言：

本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：

a 熟悉简单JQuery Ajax的使用

b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll)

c 熟悉下handler的基本用法

1 简单效果图

2 前台代码

#divTb

{

width:800px;

border:1px solid #aaa;

margin:0 auto;

}

.even{background:#CCCCCC;}

.odd{background:#FFFFFF;}

//获取发布模块类型

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 += "

" + n.ModuleNum + "" + "" + n.ModuleName + "" + "" + n.ModuleDes + "";

$("#myTb").append(tbBody);

});

},

error: function(json) {

alert("加载失败");

}

});

}

$(function() {

getModuleInfo();

});

3 Handler代码

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 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表格的内容就全部完成了，希望对大家有所帮助。