文章詳情頁

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

瀏覽：98日期：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. Python+unittest+requests 接口自動化測試框架搭建教程2. Python的文本常量與字符串模板之string庫3. 利用CSS制作3D動畫4. 存儲于xml中需要的HTML轉義代碼5. 完美解決vue 中多個echarts圖表自適應的問題6. jsp+servlet簡單實現上傳文件功能（保存目錄改進）7. 一款功能強大的markdown編輯器tui.editor使用示例詳解8. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程9. Java GZip 基于內存實現壓縮和解壓的方法10. SpringBoot+TestNG單元測試的實現

排行榜

					
					Python的文本常量與字符串模板之string庫
Docker容器如何更新打包并上傳到阿里云
.Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
利用CSS制作3D動畫
jsp+servlet簡單實現上傳文件功能（保存目錄改進）
存儲于xml中需要的HTML轉義代碼
IntelliJ IDEA設置默認瀏覽器的方法
VMware中如何安裝Ubuntu
idea配置jdk的操作方法
idea打開多個窗口的操作方法
JAMon(Java Application Monitor)備忘記
				