js实现动态删除表格的行或者列-------Day57

昨天记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点:

1、var row=table.insertRow();添加一行;

2、var cell1=row.insertCell();添加一个单元格;(如果在后面继续写var cell2=row.insertCell()的话,就是添加第二列;)

3、cell1.innerHTML="第一列的内容";向第一个单元格中填充值

以上就是昨天记录的动态添加一行的全部了,当然能够添加就能删除,而今天来记录的就是动态的删除,删除一行,删除一列。首先看删除一行:

我们先来看存在的表格:

js实现动态删除表格的行或者列-------Day57
vcHQtcSx7SYjMjY2ODQ7o6zO0sPHz8jAtDxzdHJvbmc+yrXP1sm+s/3Es9a4tqjSu9DQo7o8L3N0cm9uZz682baoztLDx9Do0qrJvrP9tdrI/dDQo6zO0sPHuMPU9cO00LTE2KO/PC9wPgo8cD7V4tH5wLS/tNK7z8K0+sLro7rU2mh0bWy0+sLr1tCjrNTaZGVsUm93sLTFpcnPzO2807e9t6hvbmNsaWNrPQ=="c()";

function c(){ var table=document.getElementById("tad"); var len=table.rows.length; table.deleteRow(len-2);//这里删除的是倒数第二行,也就是第三行 }

这样我们来运行下,结果显示为:

js实现动态删除表格的行或者列-------Day57

这样,第三行就被删除了,由此我们可以得知,删除一行的方法为deleteRow(index),index为参数,表示第几行,这个参数时从上向下,由0开始数的,另外有特别需要注意的一点:如果参数不写,则效果与参数为0一样,表示删除最上面一行

这样实现删除所有行是不是就有思路了,这样我们来写下代码:

function c(){ var table=document.getElementById("tad"); var len=table.rows.length; for(var i=0;i这样我们来看下结果:

就只剩下table的外壳了,里面的内容全都不见了,原理我们懂了,代码我们也实现了,但是在实现过程中有几点我们需要注意:
1、在循环中我们是首先获取的固定值,var len=table.rows.length;然后i
想必大家都明白其中的原因,删除一行之后,在进入第二次循环的时候,表格已经变动了,则table.rows.length也改变了,然而i也增大了,等到table.row.length
2、在循环中我们写的是table.deleteRow()或者table.deleteRow(0),而不是table.deleteRow(i),跟1中的原因一样的哦

接下来我们再来记录下删除列,如果说行是deleteRow()的话,列该怎么写呢,这里没有cols的事情,事实上就是之前添加的单元格啊,将每一行的同一列上的单元格全部删除掉不就等同于删除了一列么,删除单元格的方法同样跟添加是对应的deleteCell();
这样如果说只删除固定列,怎么写也就呼之欲出了吧,继续就上面的表格进行操作,删除第三行第二列,我们来写下实现代码:

function d(){ var table=document.getElementById("tad"); table.rows[2].deleteCell(1); }

js实现动态删除表格的行或者列-------Day57

这个结果太明显了吧,那样所有列都删除也就容易多了,来继续实现下代码:

function d(){ var table=document.getElementById("tad"); for(var i=0;i

js实现动态删除表格的行或者列-------Day57

这个结果也就随之而来了,这样我们就实现了动态的删除行和列,我们再来总结下:

1、删除行的方法:deleteRow();添加行则是insertRow();

2、删除列,即是删除单元格,方法为:deleteCell();而添加列则是insertCell()

最近工作碰到了个小问题,uml时序图一直没法彻底理解了呢,看起来挺简单的,可就绕不出那个弯了,加油啊...

分类:默认分类 时间:2012-01-08 人气:3
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.130 (s). 10 q(s)