首页
所有分类
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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
js实现移动端轮播图
Dec 21 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
Bean(3) 数据类型(8) zip(1) XML(1) Geospatial(1) 自动化(1) 触发器(3) IOC(3) metaclass(1) enumerate(1)
You might like
使用swoole扩展php websocket示例
2014/02/13 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
Gird事件机制初级读本
2007/03/10 Javascript
HTML，CSS，JavaScript速查表推荐
2014/12/02 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
javaScript基础详解
2017/01/19 Javascript
javascript cookie的基本操作（添加和删除）
2017/07/24 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
斯德哥尔摩通票：Stockholm Pass
2018/01/09 全球购物
韩国流行时尚女装网站：Dintchina（中文）
2018/07/19 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
高中生家长会演讲稿
2014/01/14 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
自荐信怎么写
2015/03/04 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
MySQL添加索引特点及优化问题
2022/07/23 MySQL