首頁 > 開發者 > JavaScript

javascript操作table（insertRow()，deleteRow()，insertCell()，deleteCell()方法）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

</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>

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

</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>

<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="delCell()" value="Delete cell">

</body>
</html>

來源：http://www.w3school.com.cn/

 

項目中的應用：

<script type="text/javascript">

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--;
 }

</script>

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript comparison table javascript type conversion table console table javascript array to table javascript javascript dom table javascript hash table example javascript table plugin
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More