文章詳情頁

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

瀏覽：180日期：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. 一文帶你徹底理解Java序列化和反序列化2. 用Spring JMS使異步消息變得簡單3. PHP驗證碼工具－Securimage4. js實現碰撞檢測5. 關于IDEA 2020.3 多窗口視圖丟失的問題6. JS實現前端動態分頁碼代碼實例7. javascript實現貪吃蛇小練習8. Python 制作查詢商品歷史價格的小工具9. ASP.NET MVC使用jQuery ui的progressbar實現進度條10. Python 下載Bing壁紙的示例

排行榜

					
					一文帶你徹底理解Java序列化和反序列化
javascript實現貪吃蛇小練習
用Spring JMS使異步消息變得簡單
關于IDEA 2020.3 多窗口視圖丟失的問題
PHP驗證碼工具－Securimage
js實現碰撞檢測
JS實現前端動態分頁碼代碼實例
AspectJ 支持JAVA 5的新特性
python對批量WAV音頻進行等長分割的方法實現
Android 簡單的實現滑塊拼圖驗證碼功能
Java源碼解析之SortedMap和NavigableMap
				