jquery动态生成表格table

jquery动态生成表格table
动态生成table有很多好处，如：可以为指定列设置为图标或控件，可以为指定列或行添加指定事件（右键、双击等）
实现思路：客户端发送请求→服务端接收请求，从数据库获取数据到dataset，dataset转换为xml形式回发给客户端→客户端接收数据并给table动态添加行。

客户端代码：(列名按服务端返回的列名来定)
function GetData() {
$.ajax({
type: "GET",
url: "../Page_Ajax/RS_OverView.aspx",
dataType: "xml",
success: function(xmldata) {
$(xmldata).find("dt").each(
function(index) {
var otr = $("<tr></tr>").appendTo($("#oTable"));
otr.append($("<td>" + $(this).find("节点ID").text() + "</td>")); otr.append($("<td>"+ $(this).find("节点名称").text() + "</td>")); otr.append($("<td>" + $(this).find("瞬时流量").text() + "(m³
/d)</td>"));
otr.append($("<td>" + $(this).find("压力").text() +
"(MPa)</td>"));
otr.append($("<td>"+ $(this).find("温度").text() + "(℃)</td>")); otr.append($("<td>" + $(this).find("累计流量").text() + "(m
³)</td>"));
});
}
});
}
表格基本结构：
<table id="oTable"style="width: 100%;"class="datalist">
<tr>
<td>
<label>节点ID</label>
</td>
<td>
<label>节点名称</label>
</td>
<td>
<label>瞬时流量</label>
</td>
<td>
<label>压力</label>
</td>
<td>
<label>温度</label>
</td>
<td>
<label>累计流量</label>
</td>
</tr>
</table>
服务端代码：
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = new DataSet("ds");
DataTable dt = new DataTable("dt");
dt.Columns.Add("节点ID");
dt.Columns.Add("节点名称");
dt.Columns.Add("瞬时流量");
dt.Columns.Add("压力");
dt.Columns.Add("温度");
dt.Columns.Add("累计流量");
ds.Tables.Add(dt);
//此处为datatable添加行数据
ResponseXML(ds.GetXml());
}
private void ResponseXML(string xml)
{
Response.ContentType = "text/xml";
Response.Charset = "utf-8";
Response.Clear();
Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>"); Response.Write(xml);
Response.End();
}
至于为表格添加事件和样式与普通的jquery、css代码相同，在此不再赘述。