JS操作DOM 使用表格动态展示数据










最后更新时间:
 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";

 

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

 

样式:

 

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

 

运行起来就能看到动态的效果,增加 CollectGarbage(); 方法是为了回收一些内容,不用过于纠结!

你可能感兴趣的:(javascript)