需求：页面加载时，通过JSON数据渲染已有评论楼层；提供textarea输入框，点击回复按钮动态新增一行评论到列表。
真实项目一般通过AJAX请求后端接口获取数据库数据；本案例直接使用JS内置JSON数组模拟数据源。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm22.aspx.cs" Inherits="WebApplication1.WebForm22" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script type="text/javascript">
var data = [
{ "level": 1, "content": "明天去打羽毛球吗？", "time": "2017-6-14" },
{ "level": 2, "content": "去哪里 上面时候？", "time": "2017-6-24" },
{ "level": 3, "content": "体育馆吗？", "time": "2017-6-28" }
];
$(function () {
var tab = $("<table></table>");
tab.attr("border", "1px");
$("#list").append(tab);
//遍历json数据源 data
$.each(data, function () {
//创建行
var $tr = $("<tr></tr>");
tab.append($tr);
//创建列-单元格
//楼层
var $td = $("<td>" + this.level + "楼</td>");
$tr.append($td);
//内容
$td = $("<td><p>" + this.content + "</p></td>");
$tr.append($td);
//日期
$td = $("<td><span style='color:red'>" + this.time + "</span></td>");
$tr.append($td);
});
});
function doReply()
{
var $tab = $("table");
var cont = $("#content").val();
var level = $("tr").length + 1;
//创建行
var $tr = $("<tr></tr>");
$tab.append($tr);
//创建列-单元格
//楼层
var $td = $("<td>" + level + "楼</td>");
$tr.append($td);
//内容
$td = $("<td><p>" + cont + "</p></td>");
$tr.append($td);
//日期
var now = new Date();
var dateStr = now.getFullYear() + "-" + (now.getMonth()+1) + "-" + now.getDate();
$td = $("<td><span style='color:red'>" + dateStr + "</span></td>");
$tr.append($td);
}
</script>
</head>
<body>
<div id="list">
</div>
<div>
<textarea id="content"></textarea>
<input type="button" onclick="doReply()" value="回复"/>
</div>
</body>
</html>
Code language: HTML, XML (xml)说明：
- 页面加载完成后，
$.each遍历JSON数组，动态创建table、tr、td渲染初始评论。 - 点击回复按钮执行
doReply()，读取textarea内容，动态生成新的评论行追加到表格。 - 优化：原代码只获取
getDate()（仅日期），改成完整年月日。
Previous: 动态创建Dom节点
Next: 使用JQ删除节点和选美女例子