欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年10月15日 15:19:48   作者：cuisuqiang  
這篇文章主要介紹了JS如何操作DOM基于表格動(dòng)態(tài)展示數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

公司做一個(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); // 解析JSON
			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="&nbsp;"+u.a; // insertCell插入列，從0開始
				row1.insertCell(1).innerHTML="&nbsp;"+u.b;
				row1.insertCell(2).innerHTML="&nbsp;"+u.c;
				row1.insertCell(3).innerHTML="&nbsp;"+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 id="table_div" align="left">
<font size="2px"><b>最后更新時(shí)間：</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>&nbsp;<b>A</b></th>
		<th>&nbsp;<b>B</b></th>
		<th>&nbsp;<b>C</b></th>
		<th>&nbsp;<b>D</b></th>
	</tr>
</table>
</div>
</body>
</html>

效果：

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

下面來簡(jiǎn)單說一下實(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="&nbsp;"+u.a; // insertCell插入列，從0開始
	row1.insertCell(1).innerHTML="&nbsp;"+u.b;
	row1.insertCell(2).innerHTML="&nbsp;"+u.c;
	row1.insertCell(3).innerHTML="&nbsp;"+u.d;
}

你也可以這樣：

var row1cell0=row1.insertCell(0);
// 指定列的樣式
row1cell0.className="m_td1";

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

<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>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論