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 实现删除和添加的功能

猜你喜欢