您的位置：首页 > Web前端 > JavaScript

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

2016-05-27 22:42 489 查看

<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="发表" onclick="addElement()" />
<input type="reset" name="reset" value="重置" />
<input type="button" name="deleteFirst" value="删除第一条评论" onclick="deleteFirstE()" />
<input type="button" name="deleteLast" value="删除最后一条评论" onclick="deleteLastE()"/>
</form>
</dir>
</body>
</html></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom javascript

相关文章推荐

新的分享

章节导航