文章詳情頁

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

瀏覽：176日期：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. IntelliJ IDEA設置自動提示功能快捷鍵的方法2. 通過Django Admin+HttpRunner1.5.6實現簡易接口測試平臺3. Docker 部署 Prometheus的安裝詳細教程4. IntelliJ IDEA安裝插件的方法步驟5. idea重置默認配置的方法步驟6. idea導入maven項目的方法7. php過濾器使用詳解8. idea給項目打war包的方法步驟9. idea打開多個窗口的操作方法10. IntelliJ IDEA調整字體大小的方法

排行榜

					
					通過Django Admin+HttpRunner1.5.6實現簡易接口測試平臺
IntelliJ IDEA安裝插件的方法步驟
Docker 部署 Prometheus的安裝詳細教程
idea導入maven項目的方法
IntelliJ IDEA設置自動提示功能快捷鍵的方法
idea重置默認配置的方法步驟
php過濾器使用詳解
IntelliJ IDEA調整字體大小的方法
IntelliJ IDEA設置背景圖片的方法步驟
idea打開多個窗口的操作方法
idea給項目打war包的方法步驟
				