js和DOM结合实现评论功能 (可以添加，删除）-CSDN博客

本文链接：https://blog.csdn.net/qq_44658941/article/details/133068361

功能讲解：

1.采用<table>和<tr> <td>的布局，用以实现评论人和评论功能

2.采用dom技术，因为只要建立html文件，里面的任何节点都是Node类型的节点，都可以实现Node对象和Dom的方法，DOM的形状是树形，下面的每个节点都是html里面的标签。

实现动态添加评论和删除的原理是：

给table评论根添加子树(自下向上生成节点，连接成一棵子树，添加到评论的根节点上面去)，每添加一棵子树就是添加一行评论，删除就是调用document的方法，删掉第几行即可。

建树流程图如下，结合代码看，更有助于理解特别注意我的是从下边向上面建立子树，因为这样有零到整，有条理。

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>发表评论</title>  </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="发表" οnclick="addElement()"/>   <input name="Reset" type="reset" class="btn_grey" value="重置"/>   <input name="Button" type="button" class="btn_grey" value="删除第一条评论" οnclick="deleteFirstE()" />   <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" οnclick="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>