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

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

我知道有一些插件可以做,但问题是我找的那个插件发现动态更新数据时IE内存一直累积,最后会造成崩溃现象

使用别人的插件说起来是效果好一些,功能多一些,但是需要的JS和复杂的逻辑,一旦出问题你很难去处理它

我也赶不上再去研究它,我直接手工写一个算了,虽然没有多好的效果,没有额外的功能,但是实现动态表格数据刷新,还是能充分满足要求的!

先把代码全部贴出来,只要把这个代码写到HTML中,就能看到效果:










最后更新时间:
 A  B  C  D

效果:

JS如何操作DOM基于表格动态展示数据_第1张图片

数据会一次是个位数一次是十位数的变化。

下面来简单说一下实现:

数据来源可以是推送的,可以是Ajax请求的,数据源就是Json字符串

解析Json,循环获得对象数组,每循环一次增加一行,然后根据属性在行中增加单元格和增加单元格的内容。如果你想,也可以设置行和单元格的样式

当然每次增加前要先清除掉除标题以外的所有行,然后再增加

删除单元格的方法:

// 删除所有行,不删除标题行
function fnDeleteXLRow(){
	var table = document.getElementById('proc');
	var rowCount = table.rows.length; // 获得一共多少行,因为不删除标题,所以索引从 1 开始
	for(var i=1;i 
 

获得有多少行,从索引 1 开始循环一定的次数,每次删除的都是 索引 1 ,因为删除之后下面的会顶上来,这个看一下Excel就明白了

循环对象增加行和列的代码:

for(var i=0;i 
 

你也可以这样:

var row1cell0=row1.insertCell(0);
// 指定列的样式
row1cell0.className="m_td1";

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


样式:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(JS如何操作DOM基于表格动态展示数据)