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

2019-11-20 21:27:27

字體：大中小

來源：轉載

供稿：網友

insertRow() 方法

定義和用法

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

語法

tableObject.insertRow(index)

返回值

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

說明

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

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

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

拋出

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

例子

復制代碼代碼如下:

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

</body>
</html>

deleteCell()

定義和用法

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

語法

tablerowObject.deleteCell(index)

說明

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

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

拋出

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

例子

復制代碼代碼如下:

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

</body>
</html>

insertCell()

定義和用法

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

語法

tablerowObject.insertCell(index)

返回值

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

說明

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

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

拋出

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

例子

復制代碼代碼如下:

<html>
<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>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Insert cell">

</body>
</html>

deleteCell()

定義和用法

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

語法

tablerowObject.deleteCell(index)

說明

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

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

拋出

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

例子

復制代碼代碼如下:

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

</body>
</html>

項目中的應用：

復制代碼代碼如下:

var trIndex = 0;

//動態增加行
unction appendConvert(){

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

var className;
if(null!=sel){
   for(var i = 0; i < sel.options.length; i++){
    if(sel.options[i].selected)
     className=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+"<input type='button' value='刪除' onclick='deleteRow(this)'>";
   newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name' value='"+obj.name+"'>";
   if(null!=obj.paramList){
    var paramStr = "";
    for(var i = 0; i < obj.paramList.length; i++){
     paramStr = paramStr+
      "參數名："+obj.paramList[i].name+
      "；參數類型："+obj.paramList[i].type+
      "；參數值：<input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+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--;
}