首页
所有分类
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数组使用调用方法汇总
Dec 08 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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
Android(19) systemctl(1) Spring Data JPA(4) 线程池(1) Repository接口(3) JAVA(88) DHCP(2) 池化技术(1) 主题(1) Ubuntu Server(6)
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
深入理解PHP原理之异常机制
2010/08/21 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
zend framework重定向方法小结
2016/05/28 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
javascript 实现文本使用省略号替代（超出固定高度的情况）
2017/02/21 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Django框架实现的分页demo示例
2019/05/25 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
韩国女装NO.1网店：STYLENANDA
2016/09/16 全球购物
Expedia法国：全球最大在线旅游公司
2018/09/30 全球购物
剪枝的学问教学反思
2014/02/07 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
毕业生个人自荐书
2015/03/05 职场文书
生活小常识广播稿
2015/08/19 职场文书
合理化建议书范文
2015/09/14 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js