js的insertRow(),deleteRow(),insertCell(),deleteCell()函式用法詳解

antzone發表於2017-03-17

table表格的使用頻率越來越少了,因為表格具有很大的侷限性,不過這僅僅是對於頁面佈局來說的,如果表格用來組織資料,那麼它的優勢還是非常明顯的,下面簡單介紹一下js操作table中常用的幾個函式,希望能夠給需要的朋友帶來幫助。

一.insertRow()函式:

此函式可以在表格的指定位置插入一個行。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
tableObject.insertRow(index)

引數說明:

1.tableObject:要插入行的表格物件。

2.index:表示要插入行的位置。新的行會插入到索引值為index的行的前面。

此函式會建立一個行物件,也就是tr物件,然後再將這個行插入到表的指定位置。

如果原來的table是空的,則會首先建立一tbody,然後再將行插入到這個tbody中。

二.deleteRow()函式:

此函式的作用和insertRow()函式恰好相反,它是用來刪除表格中指定位置的行。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
tableObject.deleteRow(index)

引數說明:

1.tableObject:要刪除行的表格物件。

2.index:表示要刪除行的位置,從0開始的。

<thead>和<tfoot>中的行並不是分開計算索引的,而是一起計算。

三.insertCell()函式:

此函式用來在一行的指定位置插入一個td單元格。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
tablerowObject.insertCell(index)

引數說明:

1.tablerowObject:要插入單元格的行物件。

2.index:可選引數,表示要插入單元格的位置,從0開始的。

該方法會建立一個新的td物件,並將其插入行的指定位置。如果沒有指定index引數或者此引數的值等於行的單元格數,那麼此單元格會被插入行的末尾,否則行會被插入到索引值為index的單元格之前。

四.deleteCell()函式:

此函式可以刪除表格行中的td單元格。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
tablerowObject.deleteCell(index)

引數說明:

1.tablerowObject:要刪除單元格的行物件。

2.index:可選引數,表示要刪除單元格的位置,從0開始的。

相關文章