JS DOM 实现删除和添加的功能
Posted 旺旺a
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS DOM 实现删除和添加的功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title>发表评论</title> <link rel="stylesheet" href="CSS/style.css"> <script language="javascript"> //用于在评论列表中添加一条评论信息,还有清空评论人和评论内容文本框 function addElement() { //创建显示评论人的文本节点TextNode var person1 = document.createTextNode(form1.person.value); //创建显示评论内容的文本节点TextNode var content1 = document.createTextNode(form1.content.value); //创建td类型 的 Element节点 var td_person1 = document.createElement("td"); var td_content1 = document.createElement("td"); //创建一个tr类型 的 Elements节点 var tr = document.createElement("tr"); //创建一个tbody类型 的 Element节点 var tbody = document.createElement("tbody"); //将TextNode节点加入到td类型的节点 td_person1.appendChild(person1); td_content1.appendChild(content1); //将td类型的节点加入到tr类型的节点 tr.appendChild(td_person1); tr.appendChild(td_content1); //将tr类型的节点加入到tbody类型的节点 tbody.appendChild(tr); //获取table对象 的 Id=comment var tComment = document.getElementById("comment"); //将tbody节点 加入上一个table节点的后面 tComment.appendChild(tbody); form1.person.value = ""; form1.content.value = ""; } //用于将评论列表中的第一条评论信息删除, function deleteFristE() { //获取table对象 的 Id=comment var dComment = document.getElementById("comment"); //如果获取的对象超过了两行,则删除第二行 if (dComment.rows.length > 1) { //删除第二行 dComment.deleteRow(1); } } //用于将评论列表中的最后一条评论信息删除, function deleteLastE() { //获取table对象 的 Id=comment var lComment = document.getElementById("comment"); //如果获取的对象超过了两行,则删除第二行 if (lComment.rows.length > 1) { //删除第二行 lComment.deleteRow(lComment.rows.length - 1); } } </script> </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 width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment"> <tr> <td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td> <td width="82%" align="center" bgcolor="#E5BB93">评论内容</td> </tr> </table> <!-- ---------------------------------------------------------------------> <form name="form1" method="post" action=""> <table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="119" height="14"> </td> <td width="481"> </td> </tr> <tr> <td height="27" align="center">评 论 人：</td> <td> <input name="person" type="text" id="person" size="40"> </td> </tr> <tr> <td align="center">评论内容：</td> <td><textarea name="content" cols="60" rows="6" id="content"></textarea></td> </tr> <tr> <td height="40"> </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=" deleteFristE()"> <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td> </tr> </table> </form> </body> </html>
<!--
body{
FONT-SIZE: 9pt;
margin-left:0px;
SCROLLBAR-FACE-COLOR: #E5BB93;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #ececec;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ececec;
SCROLLBAR-DARKSHADOW-COLOR: #999966;
BACKGROUND-COLOR: #fcfcfc
}
a:hover {
font-size: 9pt; color: #FF6600;
}
a {
font-size: 9pt; text-decoration: none; color: #676767;
noline:expression(this.onfocus=this.blur);
}
td{
font-size: 9pt; color: #000000;
padding:5px;
}
.btn_grey {
font-family: "宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
hr{
border-style:solid;
height:1px;
color:#CCCCCC;
}
-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
以上是关于JS DOM 实现删除和添加的功能的主要内容，如果未能解决你的问题，请参考以下文章