功能讲解：
1.采用<table>和<tr> <td>的布局，用以实现评论人和评论功能
2.采用dom技术，因为只要建立html文件，里面的任何节点都是Node类型的节点，都可以实现Node对象和Dom的方法，DOM的形状是树形，下面的每个节点都是html里面的标签。
实现动态添加评论和删除的原理是：
给table评论根添加子树（自下向上生成节点，连接成一棵子树，添加到评论的根节点上面去)，每添加一棵子树就是添加一行评论，删除就是调用document的方法，删掉第几行即可。
建树流程图如下，结合代码看，更有助于理解 特别注意我的是从下边向上面建立子树，因为这样有零到整，有条理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发表评论</title>
<!--<link rel="stylesheet" type="text/css" href="./css/style.css"/>-->
</head>
<body>
<!--装逼的地方-->
<table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666">
<thead>
<tr>
<td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>
<td width="86%" align="left" bgcolor="#FFFFFF"> 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td>
</tr>
</thead>
</table>
<br />
<!--评论区-->
<table align="center" width="600px" border="1" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27px" align="center" bgcolor="#E5BB93">评论人</td>
<td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<br />
<form name="form1" action="" method="post">
<table width="600px" height="122" border="0" align="center" cellpadding="0" cellspacing="0">
<!--空行分界-->
<tr>
<td width="119px" height="14px"> </td>
<td width="481"> </td>
</tr>
<!--评论人的表单-->
<tr>
<td height="27px" align="center">评论人</td>
<td>
<input name="person" type="text" id="person" size="40px"/>
</td>
</tr>
<!--评论内容-->
<tr>
<td align="center">评论内容</td>
<td>
<textarea name="content" cols="60" rows="6" id="content"></textarea>
</td>
</tr>
<!--按钮行  标识换行-->
<tr>
<td height="40px"> </td>
<td>
<input name="Button" type="button" class="btn_grey" value="发表" onclick="addElement()"/>
<input name="Reset" type="reset" class="btn_grey" value="重置"/>
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" onclick="deleteFirstE()" />
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onclick="deleteLastE()"/>
</td>
</tr>
</table>
</form>
</body>
<script language="JavaScript">
function addElement() //原理：创建完所有节点然后连到一起，形程table线面的一个树枝
{
//创建节点
var person = document.createTextNode(form1.person.value); //创建代表评论人的TextNode节点
var content = document.createTextNode(form1.content.value); //创建代表评论的TextNode的节点
//创建td类型的Element节点
var td_person = document.createElement("td");
var td_content = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
//形成树枝
//将TextNode节点加入td类型的节点中
td_person.appendChild(person);
td_content.appendChild(content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
//将tr类型的节点添加到tbody节点中
tbody.appendChild(tr);
var tComment = document.getElementById("comment"); //生成一个comment节点
tComment.appendChild(tbody);
//清空评论人和评论里面的内容
form1.person.value="";
form1.content.value="";
}
function deleteFirstE() //删除第一条评论
{
var tComment = document.getElementById("comment"); //获取table对象
if(tComment.rows.length>1)
{
tComment.deleteRow(1); //删除表格的第二行
}
}
function deleteLastE() //删除最后一条评论
{
var tComment = document.getElementById("comment");
if(tComment.rows.length>1)
{
tComment.deleteRow(tComment.rows.length-1); //删除最后一行评论
}
}
function a()
{
alert();
}
</script>
</html>
