JS操作table!js table行數

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)來删去行。詳細就不是舉例了。

<a href="http://apps.hi.baidu.com/share/detail/43618150">http://apps.hi.baidu.com/share/detail/43618150</a>