javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法詳解)

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法詳解)_javascript技巧

WBOY

發布： 2016-05-16 17:09:02

原創

1282 人瀏覽過

insertRow() 方法

定義與用法

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

文法

tableObject.insertRow(index)

回傳值

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

說明

該方法建立一個新的 TableRow 對象，表示一個新的

標記，並把它插入表中的指定位置。

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

如果表是空的，則新行將被插入到一個新的

段，該段本身會被插入表中。

拋出

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

範例

複製程式碼代碼如下:

代碼如下:

value="Insert new row">

deleteCell()

定義與用法

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

Row1 cell1

Row1 cell2 td>

Row2 cell1

Row2 cell2

元素）。

文法

tablerowObject.deleteCell(index)

說明

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

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

拋出

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

複製程式碼

代碼如下:

代碼如下:

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 例外。

範例

複製程式碼代碼如下:

代碼如下:

Firstname	Lastname
Peter	Griffin

deleteCell()

定義與用法

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

元素）。

文法

tablerowObject.deleteCell(index)

說明

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

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

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

範例

複製程式碼

代碼如下:

代碼如下:

Firstname	Lastname
Peter	Griffin

項目中的應用：複製代碼程式碼如下:

var trIndex = 0;

//動態增加行
unctionappendConvert(){

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

var className;
if(null!=sel){
   for(var i = 0; i   .options[i].selected)
     className=sel.options[i].value;
   }
}
//資料來源於ajax，json形式。
轉換。 getConvertBean2Json(className,
    function(result) {
   var obj = eval('(' result ')');
   var table = 對.getElement. var newRow = table.insertRow(trIndex 1);
   newRow.insertCell(0).innerHTML = obj.name " " ;
   newRow.insertCell(1).innerHTML = "";
   if(null!=obj.paramList){
    var paramStr = "";
  .paramList.length; i ){
     paramStr
      "參數名稱：" obj.paramList[i].name
  參數值：

      ""
      "";
    }
    newRow . (2).innerHTML = paramStr;
   trIndex ;
});

}

//在deleteRow(r)上刪除行
{
var ir. ;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}

腳本>