文章詳情頁

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

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

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

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

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

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

先把代碼全部貼出來，只要把這個(gè)代碼寫到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)對(duì)象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對(duì)象var row1=tab.insertRow(rows.length); // 插入一行rows是一個(gè)數(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;}}// 更新時(shí)間的改變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; // 獲得一共多少行，因?yàn)椴粍h除標(biāo)題，所以索引從 1 開始for(var i=1;i<rowCount;i++){table.deleteRow(1); // 因?yàn)閯h除一行以后下面的行會(huì)頂上來，所以一直刪除第一行即可}}// 獲得當(dāng)前時(shí)間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>最后更新時(shí)間：</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基于表格動(dòng)態(tài)展示數(shù)據(jù)

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

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

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

解析Json，循環(huán)獲得對(duì)象數(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; // 獲得一共多少行，因?yàn)椴粍h除標(biāo)題，所以索引從 1 開始for(var i=1;i<rowCount;i++){table.deleteRow(1); // 因?yàn)閯h除一行以后下面的行會(huì)頂上來，所以一直刪除第一行即可}}

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

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

for(var i=0;i<objs.length;i++){ // 循環(huán)對(duì)象var u = objs[i];var tab=document.getElementById('proc'); // 獲得表格var rows=tab.rows; // 表格ROW對(duì)象var row1=tab.insertRow(rows.length); // 插入一行rows是一個(gè)數(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è)置一個(gè)樣式引用，然后在該樣式中處理就可以了

樣式：

這個(gè)樣式只針對(duì)該表格生效！

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

JavaScript

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

相關(guān)文章：

1. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器2. Xml簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理3. phpstudy apache開啟ssi使用詳解4. ASP.NET MVC使用異步Action的方法5. 爬取今日頭條Ajax請(qǐng)求6. jsp文件下載功能實(shí)現(xiàn)代碼7. ajax實(shí)現(xiàn)頁面的局部加載8. AJAX的跨域問題解決方案9. uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送10. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算

排行榜

					
					phpstudy apache開啟ssi使用詳解
IDEA中如何正確快速打jar包的方式
idea install 時(shí)提示jdk的某個(gè)jar包的包不存在的問題
IntelliJ IDEA導(dǎo)入jar包的方法
.Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
IntelliJ IDEA多屏后窗口不顯示問題解決方案
idea刪除項(xiàng)目的操作方法
java類加載機(jī)制、類加載器、自定義類加載器的案例
Java多線程鎖機(jī)制相關(guān)原理實(shí)例解析
SSM框架整合之Spring+SpringMVC+MyBatis實(shí)踐步驟
Spring中基于xml的AOP的詳細(xì)步驟
				