文章詳情頁

JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù)

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

公司做一個實時監(jiān)控有一個地方需要把后臺推送的數(shù)據(jù)動態(tài)的使用表格進行展示

我知道有一些插件可以做，但問題是我找的那個插件發(fā)現(xiàn)動態(tài)更新數(shù)據(jù)時IE內(nèi)存一直累積，最后會造成崩潰現(xiàn)象

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

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

先把代碼全部貼出來，只要把這個代碼寫到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(); // 清除除標(biāo)題外所有行var objs=eval(values); // 解析JSONfor(var i=0;i<objs.length;i++){ // 循環(huán)對象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對象var row1=tab.insertRow(rows.length); // 插入一行rows是一個數(shù)組，代表沒一行，索引從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();// 產(chǎn)生回調(diào)setTimeout(callback, 1000); }// 刪除所有行，不刪除標(biāo)題行 function fnDeleteXLRow(){var table = document.getElementById(’proc’);var rowCount = table.rows.length; // 獲得一共多少行，因為不刪除標(biāo)題，所以索引從 1 開始for(var i=1;i<rowCount;i++){table.deleteRow(1); // 因為刪除一行以后下面的行會頂上來，所以一直刪除第一行即可}}// 獲得當(dāng)前時間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基于表格動態(tài)展示數(shù)據(jù)

數(shù)據(jù)會一次是個位數(shù)一次是十位數(shù)的變化。

下面來簡單說一下實現(xiàn)：

數(shù)據(jù)來源可以是推送的，可以是Ajax請求的，數(shù)據(jù)源就是Json字符串

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

當(dāng)然每次增加前要先清除掉除標(biāo)題以外的所有行，然后再增加

刪除單元格的方法：

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

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

循環(huán)對象增加行和列的代碼：

for(var i=0;i<objs.length;i++){ // 循環(huán)對象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對象var row1=tab.insertRow(rows.length); // 插入一行rows是一個數(shù)組，代表沒一行，索引從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';

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

樣式：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

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

相關(guān)文章：

1. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼2. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)3. bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼4. 解決python執(zhí)行較大excel文件openpyxl慢問題5. asp文件用什么軟件編輯6. python 基于opencv 實現(xiàn)一個鼠標(biāo)繪圖小程序7. Python OpenCV實現(xiàn)測量圖片物體寬度8. Android通過Java sdk的方式接入OpenCv的方法9. python opencv把一張圖片嵌入（疊加）到另一張圖片上的實現(xiàn)代碼10. PHP擴展之APC——Alternative PHP Cache(可選PHP緩存)

排行榜

					
					ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼
ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)
bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼
詳解Idea中HTTP Client請求測試工具的使用
Django 自定義權(quán)限管理系統(tǒng)詳解(通過中間件認(rèn)證)
PHP擴展之APC——Alternative PHP Cache(可選PHP緩存)
vue 虛擬DOM的原理
asp文件用什么軟件編輯
探究Android客戶端網(wǎng)絡(luò)預(yù)連接優(yōu)化機制
Android studio 混淆配置詳解
ant design vue中日期選擇框混合時間選擇器的用法說明
				