首页
所有分类
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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
基于jquery的横向滚动条（滑动条）
Feb 24 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
基于jquery实现导航菜单高亮显示（两种方法）
Aug 23 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
vue生命周期实例小结
Aug 15 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
ES6如何用一句代码实现函数的柯里化
Jan 18 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
墨西哥购物网站(16) 意大利购物网站(128) 台湾购物网站(77) 埃及购物网站(2) 印尼购物网站(37) 马来西亚购物网站(41) 丹麦购物网站(22) 澳大利亚购物网站(309) 法国购物网站(144) 俄罗斯购物网站(137)
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php 静态变量的初始化
2009/11/15 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue中监听返回键问题
2019/08/28 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
jQuery实现简单聊天室
2020/02/08 jQuery
Python中属性和描述符的正确使用
2016/08/23 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python 产生token及token验证的方法
2018/12/26 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python实现简单井字棋游戏
2020/03/04 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Ellos丹麦：时尚和服装在线
2016/09/19 全球购物
小学学校门卫岗位职责
2014/08/03 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2019年预备党员的思想汇报：加深对党的认知
2019/09/25 职场文书