首页
所有分类
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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
浅析return false的正确使用
Nov 04 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JQuery工具函数汇总
Jun 15 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 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) yolo3(1) 逆序(1) UV(1) PV(1) Seaborn(1) jenkins(1) Inception(2) 字符串(2) 进程假死(1)
You might like
php导出CSV抽象类实例
2014/09/24 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
js判断是否是手机页面
2017/03/17 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
浅析Git版本控制器使用
2017/12/10 Python
django框架自定义用户表操作示例
2018/08/07 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python用700行代码实现http客户端
2021/01/14 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
英国皇家造币厂：The Royal Mint
2018/10/05 全球购物
比利时的在线灯具店：Lampen24.be
2019/07/01 全球购物
体育之星事迹材料
2014/05/11 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Golang入门之计时器
2022/05/04 Golang
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技