JavaScript模拟无刷新评论效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它模拟实现了无刷新评论效果。

当然真正的无刷新评论效果,需要结合ajax和数据等实现,这里介绍一些dom操作技巧。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
function AppendComment() {
   var nicknameValue = document.getElementById("nickName").value;
   //获取评论文本框的值
   var commentValue = document.getElementById("comment").value;
   var tblComment = document.getElementById("tblComment");
   var tr = tblComment.tBodies[0].insertRow(-1);
   var tdNickName = tr.insertCell(-1);
   tdNickName.innerHTML = nicknameValue;
   var tdComment = tr.insertCell(-1);
   tdComment.innerHTML = commentValue;
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    AppendComment();
  }
}
</script>
</head>
<body>
犀牛前端部落欢迎您,本站的url地址是pipipi.net
<p>评论</p>
<table id="tblComment" border="1">
  <tbody>
    <tr>
      <td>李莫:</td>
      <td>非常好的网站</td>
    </tr>
  </tbody>
 </table>
 昵称:<input type="text" id="nickName"/><br/>
 评论:<textarea id="comment"></textarea><br/>
 <input type="button" id="bt" value="评论"/>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function AppendComment() {},此方法实现评论功能。

(2).var nicknameValue = document.getElementById("nickName").value,获取昵称。

(3).var commentValue = document.getElementById("comment").value,获取评论内容。

(4).var tblComment = document.getElementById("tblComment"),获取table元素对象。

(5).var tr = tblComment.tBodies[0].insertRow(-1),将新行插入到表格的最后。

(6).var tdNickName = tr.insertCell(-1),将新的单元格附加到新行。

(7).tdNickName.innerHTML = nicknameValue,将单元格的内容设置为昵称。

二.相关阅读:

(1).insertRow()方法参阅JavaScript insertRow()一章节。

(2).insertCell()方法参阅JavaScript insertCell()一章节。

(3).innerHTML属性参阅JavaScript innerHTML一章节。

回复

我来回复
  • 暂无回复内容