tableinsertRow、deleteRow定義和用法總結_javascript技巧

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

javascript操作table:

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

table.insertRow()在IE下沒問題 但在firefox下就得改為table.insertRow(-1)
同樣其相應的insertCell()也要改為insertCell(-1)

insertRow() 方法

定義和用法

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

語法

tableObject.insertRow(index)

返回值

返回一個 TableRow，表示新插入的行。

說明

該方法創建一個新的 TableRow 對象，表示一個新的 標記，并把它插入表中的指定位置。

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

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

拋出

若參數 index 小于 0 或大于等于表中的行數，該方法將拋出代碼為 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() 方法用于刪除表格行中的單元格（ 元素）。

語法

tablerowObject.deleteCell(index)

說明

參數 index 是要刪除的表元在行中的位置。

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

拋出

若參數 index 小于 0 或大于等于行中的的表元數，該方法將拋出代碼為 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 表的一行的指定位置插入一個空的 元素。

語法

tablerowObject.insertCell(index)

返回值

一個 TableCell 對象，表示新創建并被插入的 元素。

說明

該方法將創建一個新的 元素，把它插入行中指定的位置。新單元格將被插入當前位于 index 指定位置的表元之前。如果 index 等于行中的單元格數，則新單元格被附加在行的末尾。

請注意，該方法只能插入 數據表元。若需要給行添加頭表元，必須用 Document.createElement() 方法和 Node.insertBefore() 方法（或相關的方法）創建并插入一個 元素。

拋出

若參數 index 小于 0 或大于等于行中的的表元數，該方法將拋出代碼為 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() 方法用于刪除表格行中的單元格（ 元素）。

語法

tablerowObject.deleteCell(index)

說明

參數 index 是要刪除的表元在行中的位置。

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

拋出

若參數 index 小于 0 或大于等于行中的的表元數，該方法將拋出代碼為 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>

項目中的應用：
代碼如下:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com