利用DOM进行评论的发表与删除

最新推荐文章于 2022-05-29 21:51:44 发布

于先森啊

最新推荐文章于 2022-05-29 21:51:44 发布

阅读量590

点赞数

文章标签： dom javascript

本文链接：https://blog.csdn.net/yuhui123999/article/details/51520202

版权

<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
	function addElement() {
		//创建代表评论人的TextNode节点
		var person = document.createTextNode(form1.person.value);
		//创建代表评论内容的TextNode节点
		var centent = document.createTextNode(form1.content.value);
		//创建td,tr和tbody类型的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(centent);
		//将td类型的节点添加到tr节点中
		tr.appendChild(td_person);
		tr.appendChild(td_content);
		//将tr节点添加到tbody节点中
		tbody.appendChild(tr);
		//获得table节点，并且把tbody添加到table节点
		var mytable = document.getElementById("mytable");
		mytable.appendChild(tbody);
		//清空内容
		form1.person.value = "";
		form1.content.value = "";
	}
	
	function deleteFirstE() {
		var mytable=document.getElementById("mytable");
		if(mytable.rows.length>1){
			mytable.deleteRow(1);//删除表格第二行，也就是第一条评论
		}
	}
	
	function deleteLastE() {
		var mytable=document.getElementById("mytable");
		if(mytable.rows.length>1){
			mytable.deleteRow(mytable.rows.length-1);//删除表格最后一行，也就是最后一条评论
		}
	}
</script>
</head>
<body>
	<table id="mytable" width="500" border="1" align="center">
		<tr>
			<td width="20%" align="center">评论人</td>
			<td width="80%" align="center">评论内容</td>
	</table>
	<br />
	<br />
	<hr />
	<dir align="center">
		<form name="form1" method="post" action="">
			评论人：<input name="person" type="text" id="person" size="50" /><br />
			评论内容：<textarea name="content" cols="60" rows="6" id="content"></textarea><br /> 
			<input type="button" name="send" value="发表" οnclick="addElement()" /> 
			<input type="reset" name="reset" value="重置" />
			<input type="button" name="deleteFirst" value="删除第一条评论" οnclick="deleteFirstE()" /> 
			<input type="button" name="deleteLast" value="删除最后一条评论" οnclick="deleteLastE()"/>
		</form>
	</dir>
</body>
</html></span>

于先森啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用DOM进行评论的发表与删除

function addElement() { //创建代表评论人的TextNode节点 var person = document.createTextNode(form1.person.value); //创建代表评论内容的TextNode节点 var centent = document.createTextNode(form1.content.value); //创建t
复制链接

扫一扫