JS操作table!js table行数
|
|
|
虽然此刻前台已经很少用table来结构了,但是有之处还是会难免的用到table,比如表单,或其他的列表,用table肯定比div来的方便,那么,用table的话要加上<A href="http://www.5i2i.com/<a%20href=" target=_blank>javascript/' target='_blank'>js来使成为事实一些效果,比如删去一行,添加一行,以是,有必要好好熟悉一下<A href="http://www.5i2i.com/<a%20href=" target=_blank>javascript/' target='_blank'>js对table的操作,
首先要获得table对象,有很多方法,
通过ID,table = document.getElementById()来获得
通过CLASS,table = document.getElementsByClass()来获得
通过TABNAME,table = document.getElementsByTagName()来获得
获得table对象之后呢,有可能我们要先知道table对象有几行,
可以通过,table.rows.length来获得行数,table.rows返回时下table对象的行的集合。通过row = table.rows[i]可以获得table对象的第i 1行对象。对row对象呢,它有一个属性,就是row.rowIndex返回的是i,
然后呢,需要插入行。有两个函数可以供大家使用,
insertRow(index)和insertCell(index);看到函数名大家均可以明白是什么函数了,没错,通过table对象调用insertRow函数,可以在table对象中插入一行然后返回新建的行对象,参数index是引得,表示插在第几行,从0起头,但是index不能小于0或大于table的现有行数,否则会报错。同理,通过行对象调用insertCell函数,可以在行对象中插入单位格并返回条位格对象。参数index同样是引得,同样可以通过行对象的cells集合的长度来获得,row.cells.length。
table id="tab">
熬头行熬头列
熬头行第二列
第二行熬头列
第二行第二列
第三行熬头列
第三行第二列
点这儿我
上面的例子在ff和ie下均可以运行,可以正确的添加行。
那如果要删去行呢?
我是通过获得父节点,然后删去子节点来做到的
先获得行对象tr,然后获得tr对象的父节点。par = tr.parentNode(这里为什么要通过tr的父节点来获取父节点,而不是直接通过其他直接的方法来获取父节点呢,因为ff和ie在这边上有差别,在ie上table下就是tr,而在ff下table下还有thead和tbody,tbody下才是tr,如果直接获取,则要判断,如果通过tr获取父节点,则可以直接用),然后通过par.removeChild(tr)来删去行。详细就不是举例了。
