JavaScript模擬無重新整理評論效果

antzone發表於2017-04-08
JavaScript

本章節分享一段程式碼例項，它模擬實現了無重新整理評論效果。

當然真正的無重新整理評論效果，需要結合ajax和資料等實現，這裡介紹一些dom操作技巧。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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地址是softwhy.com
<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一章節。

相關文章