JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù)
更新時間：2020年10月15日 15:19:48 作者：cuisuqiang
這篇文章主要介紹了JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
公司做一個實時監(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); // 解析JSON
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;
}
}
// 更新時間的改變
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 id="table_div" align="left">
<font size="2px"><b>最后更新時間：</b></font><input type="text" id="endTime" value="00-00-00 00:00:00" readonly="readonly">
<br>
<table id="proc" width="98%" 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>
效果：
數(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è)置一個樣式引用，然后在該樣式中處理就可以了
<table id="proc" width="98%" border="0" cellspacing="0" cellpadding="0" class="table0">
樣式：
<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>
這個樣式只針對該表格生效！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能
- mockjs+vue頁面直接展示數(shù)據(jù)的方法
- Vue.js 實現(xiàn)數(shù)據(jù)展示全部和收起功能
- json數(shù)據(jù)傳到前臺并解析展示成列表的方法
- jQuery插件jsonview展示json數(shù)據(jù)
- Springmvc處理ajax請求并返回json數(shù)據(jù)
- 使用fastjson中的JSONPath處理json數(shù)據(jù)的方法
- 如何處理后臺向前臺傳遞的json數(shù)據(jù)
- 對pandas處理json數(shù)據(jù)的方法詳解
- ajax請求后臺接口數(shù)據(jù)與返回值處理js的實例講解
- ajax處理返回的json格式數(shù)據(jù)方法
- js前端對于大量數(shù)據(jù)的展示方式及處理方法
相關(guān)文章
Span元素的width屬性無效果原因及解決方案2010-01-01
在這篇文章中,我們詳細(xì)介紹了 ElementUI 的 el-switch 組件,從基本用法到高級應(yīng)用,以及其背后的實現(xiàn)原理,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了js實現(xiàn)表單多按鈕提交action的處理方法，需要的朋友可以參考下2015-10-10
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機制，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
這篇文章主要為大家介紹了TypeScript類型使用示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習(xí)的時候我發(fā)現(xiàn)在動畫執(zhí)行時間內(nèi)快速移開鼠標(biāo)時會出現(xiàn)動畫因鼠標(biāo)移動過快從而導(dǎo)致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法,需要的朋友可以參考下2022-06-06
本文主要介紹了JS中2種定時器的使用及清除的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
javascript 一個函數(shù)對同一元素的多個事件響應(yīng)
具體方法如下該方法實現(xiàn)了對一個按鈕的mouseover和click事件的響應(yīng)2009-07-07
這篇文章主要介紹了javascript中的異步調(diào)用機制,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)可輸入可選擇的select下拉框，可及時匹配包含輸入的內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12