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

表格有幾行: var trCnt = table.rows.length; (table為Id )

每行有幾列：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 例外 。

範例

複製程式碼 程式碼如下:

程式碼如下：

function insRow()
{
document.getElementById('myTable').insertRow(0)
}






Row1 cell1
Row1 cell2


Row2 cell1
Row2 cell2



value="Insert new row">

deleteCell()

定義和用法

deleteCell()方法用於刪除表格行中的儲存格（ 元素）。

語法

tablerowObject.deleteCell(index)

說明

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

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

拋出

若參數 index 小於 0 或大於等於行中的表元數，則該方法將拋出程式碼為 INDEX_SIZE_ERR 的DOMException例外。

範例

複製程式碼 程式碼如下:

程式碼如下：

function delRow()
{
document.getElementById('myTable').deleteRow(0)
}






Row1 cell1

Row1 cell2


Row2 cell1
Row2 cell2



value="Delete first row">




insertCell()

定義和用法

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

語法

tablerowObject.insertCell(index)

傳回值

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

說明

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

請注意，此方法只能插入 資料表元。若需要為行新增頭表元，必須用 Document.createElement() 方法和 Node.insertBefore() 方法（或相關的方法）建立並插入一個 元素。

拋出

若參數 index 小於 0 或大於等於行中的表元數，則該方法將拋出程式碼為 INDEX_SIZE_ERR 的DOMException例外。

範例

複製程式碼 程式碼如下:

程式碼如下：

function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}






Firstname

Lastname


Peter
Griffin








deleteCell()

定義和用法

deleteCell() 方法用於刪除表格行中的儲存格（ 元素）。

語法

tablerowObject.deleteCell(index)

說明

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

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

拋出

若參數 index 小於 0 或大於等於行中的表元數，則該方法將拋出程式碼為 INDEX_SIZE_ERR 的DOMException例外。

範例

複製程式碼 程式碼如下:

程式碼如下：

function delCell()
{
document.getElementById('tr2').deleteCell(0)
}






Firstname
Lastname


Peter

Griffin








項目中的應用：

複製代碼 程式碼如下:

var trIndex = 0;

//動態增加行
unctionappendConvert(){


//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];

var 類別名稱;
if(null! =sel){
for(var i = 0; i if(sel.options[i].selected)
類別名稱=sel.options[i ].value;
}
}
//資料來自ajax，json形式。
convert.getConvertBean2Json(className,
function(result) {
var obj = eval('(' result) ')');
var table = document.getElementById("convertTable");

var newRow = table.insertRow(trIndex 1);
newRow.insertCell(0).innerHTML = obj .name ""
newRow.insertCell(1).innerHTML = "";
if (null!=obj.paramList){
var paramStr = ""; for(var i = 0; i paramStr = paramStr
"參數名稱：" obj.paramList[i].name
";參數類型：" obj.paramList[i].type
"；參數值：
"
""
"";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndex ;
});

}


//刪除行
on deleteRow(r){
var i=r. parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}

腳本>