tableinsertRow、deleteRow定義和用法總結(jié)_javascript技巧

每行有幾列：for (var i=0; itable.rows[i].cells.length;

javascript操作table:

insertRow()，deleteRow()，insertCell()，deleteCell()方法

table.insertRow()在IE下沒(méi)問(wèn)題 但在firefox下就得改為table.insertRow(-1)
同樣其相應(yīng)的insertCell()也要改為insertCell(-1)

insertRow() 方法

定義和用法

insertRow() 方法用于在表格中的指定位置插入一個(gè)新行。

語(yǔ)法

tableObject.insertRow(index)

返回值

返回一個(gè) TableRow，表示新插入的行。

說(shuō)明

該方法創(chuàng)建一個(gè)新的 TableRow 對(duì)象，表示一個(gè)新的 標(biāo)記，并把它插入表中的指定位置。

新行將被插入 index 所在行之前。若index等于表中的行數(shù)，則新行將被附加到表的末尾。

如果表是空的，則新行將被插入到一個(gè)新的 段，該段自身會(huì)被插入表中。

拋出

若參數(shù) index 小于 0 或大于等于表中的行數(shù)，該方法將拋出代碼為 INDEX_SIZE_ERR 的DOMException 異常 。

例子
代碼如下:

< head>
< script type="text/javascript">
function insRow()
{
document.getElementById('myTable').insertRow(0)
}
< /script>
< /head>

< body>
< table id="myTable" border="1">
< tr>
< td>Row1 cell1
< td>Row1 cell2
< /tr>
< tr>
< td>Row2 cell1
< td>Row2 cell2
< /tr>
< /table>
< br />
< input type="button" onclick="insRow()"
value="Insert new row">

< /body>
< /html>

deleteCell()

定義和用法

deleteCell() 方法用于刪除表格行中的單元格（ 元素）。

語(yǔ)法

tablerowObject.deleteCell(index)

說(shuō)明

參數(shù) index 是要?jiǎng)h除的表元在行中的位置。

該方法將刪除表行中指定位置的表元。

拋出

若參數(shù) index 小于 0 或大于等于行中的的表元數(shù)，該方法將拋出代碼為 INDEX_SIZE_ERR 的DOMException異常。

例子
代碼如下:

< head>
< script type="text/javascript">
function delRow()
{
document.getElementById('myTable').deleteRow(0)
}
< /script>
< /head>
< body>

< table id="myTable" border="1">
< tr>
< td>Row1 cell1
< td>Row1 cell2
< /tr>
< tr>
< td>Row2 cell1
< td>Row2 cell2
< /tr>
< /table>
< br />
< input type="button" onclick="delRow()"
value="Delete first row">

< /body>
< /html>

insertCell()

定義和用法

insertCell() 方法用于在 HTML 表的一行的指定位置插入一個(gè)空的 元素。

語(yǔ)法

tablerowObject.insertCell(index)

返回值

一個(gè) TableCell 對(duì)象，表示新創(chuàng)建并被插入的 元素。

說(shuō)明

該方法將創(chuàng)建一個(gè)新的 元素，把它插入行中指定的位置。新單元格將被插入當(dāng)前位于 index 指定位置的表元之前。如果 index 等于行中的單元格數(shù)，則新單元格被附加在行的末尾。

請(qǐng)注意，該方法只能插入 數(shù)據(jù)表元。若需要給行添加頭表元，必須用 Document.createElement() 方法和 Node.insertBefore() 方法（或相關(guān)的方法）創(chuàng)建并插入一個(gè) 元素。

拋出

若參數(shù) index 小于 0 或大于等于行中的的表元數(shù)，該方法將拋出代碼為 INDEX_SIZE_ERR 的DOMException異常。

例子
代碼如下:

< head>
< script type="text/javascript">
function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
< /script>
< /head>
< body>

< table border="1">
< tr id="tr1">
< th>Firstname
< th>Lastname
< /tr>
< tr id="tr2">
< td>Peter
< td>Griffin
< /tr>
< /table>
< br />
< input type="button" onclick="insCell()" value="Insert cell">

< /body>
< /html>

deleteCell()

定義和用法

deleteCell() 方法用于刪除表格行中的單元格（ 元素）。

語(yǔ)法

tablerowObject.deleteCell(index)

說(shuō)明

參數(shù) index 是要?jiǎng)h除的表元在行中的位置。

該方法將刪除表行中指定位置的表元。

拋出

若參數(shù) index 小于 0 或大于等于行中的的表元數(shù)，該方法將拋出代碼為 INDEX_SIZE_ERR 的DOMException異常。

例子
代碼如下:

< head>
< script type="text/javascript">
function delCell()
{
document.getElementById('tr2').deleteCell(0)
}
< /script>
< /head>
< body>

< table border="1">
< tr id="tr1">
< th>Firstname
< th>Lastname
< /tr>
< tr id="tr2">
< td>Peter
< td>Griffin
< /tr>
< /table>
< br />
< input type="button" onclick="delCell()" value="Delete cell">

< /body>
< /html>

項(xiàng)目中的應(yīng)用：
代碼如下:

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com