首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS如何操作DOM基于表格动态展示数据

Posted in Javascript onOctober 15, 2020

公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示

我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时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); // 解析JSON
			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;
			}
		}
		// 更新时间的改变
		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 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>

效果：

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

来指定行或列的样式，不过一般我们把表格设置一个样式引用，然后在该样式中处理就可以了

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

这个样式只针对该表格生效！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS如何操作DOM基于表格动态展示数据

- Author -

cuisuqiang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
javascript生成大小写字母
Jul 03 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
Oct 15 #Javascript
angular共享依赖的解决方案分享
Oct 15 #Javascript
ES11新增的这9个新特性，你都掌握了吗
Oct 15 #Javascript
js实现点击烟花特效
Oct 14 #Javascript
vue使用Sass时报错问题的解决方法
Oct 14 #Javascript
JavaScript原生数组函数实例汇总
Oct 14 #Javascript
波段(1) 文书(291) 城市猎人(1) HAM-2000(1) 西索(1) explain(2) 申请书(21) Docker(14) AngularJS(2) 观后感(479)
You might like
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
javascript 进阶篇1 正则表达式，cookie管理，userData
2012/03/14 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
OpenCV 模板匹配
2019/07/10 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python中实现词云图的示例
2020/12/19 Python
洲际酒店集团大中华区：IHG中国
2016/08/17 全球购物
params有什么用
2016/03/01 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
新学期开学寄语
2014/01/18 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
主办会计岗位职责
2014/03/13 职场文书
物流管理专业求职信
2014/05/29 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
发布会邀请函
2015/01/31 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
JavaScript 数组去重详解
2021/09/15 Javascript