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一章節。
相關文章
- JavaScript模擬拋物效果JavaScript
- 純css模擬下雪效果CSS
- JavaScript基礎 釋出評論/刪除評論/獲取時間JavaScript
- Vue實時重新整理之看評論改BUGVue
- 評論模組開發總結
- canvas模擬eharts首頁動畫效果Canvas動畫
- javascript模擬new的實現JavaScript
- JavaScript 模擬new的實現JavaScript
- JavaScript模擬實現replaceAll方法JavaScript
- JavaScript中模擬實現jsonpJavaScriptJSON
- JavaScript評論敏感詞過濾程式碼JavaScript
- 微信小程式點贊、評論區域性重新整理微信小程式
- 模擬 javaScript Array 原型上的方法JavaScript原型
- android模擬器無服務Android
- 我是如何做評論模組的?
- L2-015 互評成績【模擬】
- JavaScript專題之模擬實現bindJavaScript
- javascript之模擬call以及apply實現JavaScriptAPP
- JavaScript專題之模擬實現newJavaScript
- 《天穗之咲稻姬》評測:獨一無二的「水稻種植模擬器」
- PHP無限級評論回覆功能實現PHP
- Laravel-Module 模組開發一:評論模組實現Laravel
- 浪起來!使用 drawBitmapMesh 實現模擬水波紋效果
- PHP中的無限級分類、無限巢狀評論PHP巢狀
- JavaScript進階之模擬new Object()過程JavaScriptObject
- JavaScript進階之模擬new Object過程JavaScriptObject
- JavaScript進階之模擬call,apply和bindJavaScriptAPP
- JavaScript物件:我們真的需要模擬類嗎?JavaScript物件
- Altair SimSolid功能介紹 無網格快速結構模擬 衡祖模擬AISolid
- JavaScript拖拽效果JavaScript
- vue + element-ui + scss 仿簡書評論模組VueUICSS
- 案例:模擬京東快遞單號的查詢效果
- 強大的CSS:模擬下雪效果動畫製作教程CSS動畫
- 使用來重新整理網頁效果網頁
- PAT-B 1077 互評成績計算【模擬】
- 雲棲科技評論|“虛擬X”佔領真實世界
- JavaScript專題之模擬實現call和applyJavaScriptAPP
- JavaScript 深入之 call 和 apply 的模擬實現JavaScriptAPP
- javascript模擬鳥群使用cax和threejs渲染引擎JavaScriptJS