文章詳情頁

JS如何操作DOM基于表格動態展示數據

瀏覽：73日期：2024-04-16 11:28:36

公司做一個實時監控有一個地方需要把后臺推送的數據動態的使用表格進行展示

我知道有一些插件可以做，但問題是我找的那個插件發現動態更新數據時IE內存一直累積，最后會造成崩潰現象

使用別人的插件說起來是效果好一些，功能多一些，但是需要的JS和復雜的邏輯，一旦出問題你很難去處理它

我也趕不上再去研究它，我直接手工寫一個算了，雖然沒有多好的效果，沒有額外的功能，但是實現動態表格數據刷新，還是能充分滿足要求的！

先把代碼全部貼出來，只要把這個代碼寫到HTML中，就能看到效果：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title></title><style type='text/css'>.table0 {font-family: '宋體';font-size: 14px;width: 400px;border-top-width: 1px;border-top-style: solid;border-top-color: #c4cdd4;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #c4cdd4;border-right-width: 1px;border-right-style: solid;border-right-color: #c4cdd4;border-left-width: 1px;border-left-style: solid;border-left-color: #c4cdd4;}.table0 tr {height : 25px;padding-left:5px;text-align: left;}.table0 th {color: #4c7c9b;font-weight: normal;background-color: #f1f1f1;height: 25px;border-right-width: 1px;border-right-style: solid;border-right-color: #c4cdd4;}.table0 td {border-right-width: 1px;border-right-style: solid;border-right-color: #c4cdd4;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #c4cdd4;}</style><script language='javascript' type='text/javascript'>var istt = false;var values = '';function callback(){if(istt){values = '[{’a’:1,’b’:’1’,’c’:’1’,’d’:’1’},{’a’:2,’b’:’2’,’c’:’2’,’d’:’2’},{’a’:3,’b’:’3’,’c’:’3’,’d’:’3’},{’a’:4,’b’:’4’,’c’:’4’,’d’:’4’}]';istt=false;}else{values = '[{’a’:10,’b’:’10’,’c’:’10’,’d’:’10’},{’a’:20,’b’:’20’,’c’:’20’,’d’:’20’},{’a’:30,’b’:’30’,’c’:’30’,’d’:’30’},{’a’:40,’b’:’40’,’c’:’40’,’d’:’40’}]';istt=true;}if(null!=values&&’’!=values){fnDeleteXLRow(); // 清除除標題外所有行var objs=eval(values); // 解析JSONfor(var i=0;i<objs.length;i++){ // 循環對象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對象var row1=tab.insertRow(rows.length); // 插入一行rows是一個數組，代表沒一行，索引從0開始row1.insertCell(0).innerHTML=' '+u.a; // insertCell插入列，從0開始row1.insertCell(1).innerHTML=' '+u.b;row1.insertCell(2).innerHTML=' '+u.c;row1.insertCell(3).innerHTML=' '+u.d;}}// 更新時間的改變document.getElementById('endTime').value=curDateTime();// 垃圾回收CollectGarbage();// 產生回調setTimeout(callback, 1000); }// 刪除所有行，不刪除標題行 function fnDeleteXLRow(){var table = document.getElementById(’proc’);var rowCount = table.rows.length; // 獲得一共多少行，因為不刪除標題，所以索引從 1 開始for(var i=1;i<rowCount;i++){table.deleteRow(1); // 因為刪除一行以后下面的行會頂上來，所以一直刪除第一行即可}}// 獲得當前時間function curDateTime(){var d = new Date(); var year = d.getYear(); var month = d.getMonth()+1; var date = d.getDate(); var day = d.getDay(); var hours = d.getHours(); var minutes = d.getMinutes(); var seconds = d.getSeconds(); var ms = d.getMilliseconds(); var curDateTime= year;if(month>9) curDateTime = curDateTime +'-'+month;else curDateTime = curDateTime +'-0'+month;if(date>9) curDateTime = curDateTime +'-'+date;else curDateTime = curDateTime +'-0'+date;if(hours>9) curDateTime = curDateTime +' '+hours;else curDateTime = curDateTime +' 0'+hours;if(minutes>9) curDateTime = curDateTime +':'+minutes;else curDateTime = curDateTime +':0'+minutes;if(seconds>9) curDateTime = curDateTime +':'+seconds;else curDateTime = curDateTime +':0'+seconds;return curDateTime; }setTimeout(callback, 1000);</script></head><body><div align='left'><font size='2px'><b>最后更新時間：</b></font><input type='text' value='00-00-00 00:00:00' readonly='readonly'><br><table border='0' cellspacing='0' cellpadding='0' class='table0'><tr><th> <b>A</b></th><th> <b>B</b></th><th> <b>C</b></th><th> <b>D</b></th></tr></table></div></body></html>

效果：

JS如何操作DOM基于表格動態展示數據

數據會一次是個位數一次是十位數的變化。

下面來簡單說一下實現：

數據來源可以是推送的，可以是Ajax請求的，數據源就是Json字符串

解析Json，循環獲得對象數組，每循環一次增加一行，然后根據屬性在行中增加單元格和增加單元格的內容。如果你想，也可以設置行和單元格的樣式

當然每次增加前要先清除掉除標題以外的所有行，然后再增加

刪除單元格的方法：

// 刪除所有行，不刪除標題行function fnDeleteXLRow(){var table = document.getElementById(’proc’);var rowCount = table.rows.length; // 獲得一共多少行，因為不刪除標題，所以索引從 1 開始for(var i=1;i<rowCount;i++){table.deleteRow(1); // 因為刪除一行以后下面的行會頂上來，所以一直刪除第一行即可}}

獲得有多少行，從索引 1 開始循環一定的次數，每次刪除的都是索引 1 ，因為刪除之后下面的會頂上來，這個看一下Excel就明白了

循環對象增加行和列的代碼：

for(var i=0;i<objs.length;i++){ // 循環對象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對象var row1=tab.insertRow(rows.length); // 插入一行rows是一個數組，代表沒一行，索引從0開始row1.insertCell(0).innerHTML=' '+u.a; // insertCell插入列，從0開始row1.insertCell(1).innerHTML=' '+u.b;row1.insertCell(2).innerHTML=' '+u.c;row1.insertCell(3).innerHTML=' '+u.d;}

你也可以這樣：

var row1cell0=row1.insertCell(0); // 指定列的樣式 row1cell0.className='m_td1';

來指定行或列的樣式，不過一般我們把表格設置一個樣式引用，然后在該樣式中處理就可以了

樣式：

這個樣式只針對該表格生效！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

JavaScript

上一條：利用js實現簡易紅綠燈下一條：js實現點擊煙花特效

相關文章：

1. 詳解瀏覽器的緩存機制2. CSS3實例分享之多重背景的實現(Multiple backgrounds)3. ASP基礎知識VBScript基本元素講解4. UDDI FAQs5. XML入門的常見問題(四)6. ASP刪除img標簽的style屬性只保留src的正則函數7. XML解析錯誤：未組織好的解決辦法8. asp(vbscript)中自定義函數的默認參數實現代碼9. 利用CSS3新特性創建透明邊框三角10. 使用Spry輕松將XML數據顯示到HTML頁的方法

排行榜

					
					XML解析錯誤：未組織好 的解決辦法
django序列化時使用外鍵的真實值操作
idea修改背景顏色樣式的方法
IntelliJ IDEA配置Tomcat服務器的方法
IntelliJ IDEA 統一設置編碼為utf-8編碼的實現
IntelliJ IDEA導出項目的方法
IntelliJ IDEA設置自動提示功能快捷鍵的方法
java將m3u8格式轉成視頻文件的方法
PHP獲取當前時間的5種實現方式
利用CSS3新特性創建透明邊框三角
詳解瀏覽器的緩存機制
				