求助：为什么这个JavaScript写了没用：

最新推荐文章于 2024-08-04 16:33:59 发布

Li_Sanpie

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量42

点赞数

文章标签： javascript java

本文链接：https://blog.csdn.net/Li_Sanpie/article/details/130780519

版权

<%@page language="java" pageEncoding="GBK"%>
<html>
<head>
<title>
使用Dom操作文档实现增删评论的功能(发表评论)
</title>
<link rel="stylesheet" href="CSS/style.css">
<script language="javascript">
function addElement(){
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");//创建tr类型的Element节点
var tbody=document.createElement("tbody");//创建tbody类型的Elemennt节点
//将TextNode节点加入td类型节点中
td_person.appendChild(person);
td_content.appendChild(content);
将td类型的节点添加到tr类型的节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);//将tr节点加入tbody中
//因为除原来的table节点外，新增的评论所用到的节点全部为新增的节点，所以除tCommennt节点不用新创建其他的都
需要使用Dom文档操作技术创建新的节点并按照节点之间的关系进行添加。
var tComment = document.getElementById=("comment");//获取table对象
tComment.appendChild(tbody);//将节点tbody加入节点尾部
form1.person.value="";//清空“评论人”文本框的内容
form1.content.value="";//清空“评论内容”文本框的内容
}
function deleteFirstE(){
var tComment = document.getElemenntById("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);//删除表格的最后一行，即最后一条评论
}
}
</script>
</head>

<body>
<table width="600" height="70" border="0" align="center" cellpadding="0" cellspacingn="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="#FFFFFFF"
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><br>
<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="deleteFirstE()">&nbsp
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()">&nbsp
</td>
</tr>
</table>
</form>
</body>
</html>

Li_Sanpie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
求助：为什么这个JavaScript写了没用：

<input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()"><td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人
复制链接

扫一扫