JavaScript insertRow()

admin發表於2018-11-04
JavaScript

此方法可以建立並在表格的指定位置插入一個新行。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
tableObject.insertRow(index)

引數解析:

（1）.tableObject：表格物件。

（2）.index：可選，預設值為-1，插入行的位置，新行將會被插入到index位置行之前。index從0開始，表示第一行，以此類推。

此方法返回新插入的行物件。

特別注意:

（1）.如果index大於表格中的行數，則報錯。

（2）.如果index值等於-1或者等於行數，那麼新行將被插入到最後一行。

（2）.如果表格為空，則新行將被插入到一個新<tbody>中，同時<tbody>會被插入表中。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
function add(){  
  for(var i=0;i<thetable.rows.length;i++) {  
    var eachRow=thetable.rows[i];  
    if(eachRow.cells[0].innerHTML==num.value){  
      alert("編號已經存在！");  
      return ;  
    }  
  }  
  var newTableRow=thetable.insertRow(thetable.rows.length);  
  newTableRow.insertCell(0).innerHTML=num.value;  
  newTableRow.insertCell(1).innerHTML=course.value;  
  newTableRow.insertCell(2).innerHTML=anthor.value;  
} 
window.onload=function() { 
  var oadd=document.getElementById("add"); 
  var odel=document.getElementById("del"); 
     
  oadd.onclick=function(){add()} 
  odel.onclick=function(){del()} 
} 
</script> 
</head> 
<body> 
<table id="thetable" border="1"> 
  <tr> 
    <td>序號</td> 
    <td>教程</td> 
    <td>作者</td> 
  </tr> 
  <tr> 
    <td>1</td> 
    <td>javascript教程</td> 
    <td>antzone</td> 
  </tr> 
  <tr> 
    <td>2</td> 
    <td>div css教程</td> 
    <td>螞蟻部落</td> 
  </tr> 
</table> 
<ul> 
  <li>序號:<input id="num" type="text" value=""></li> 
  <li>教程:<input id="course" type="text" value=""></li> 
  <li>作者:<input id="anthor" type="text" value=""></li> 
  <li> 
    <input type="button" value="新增" id="add" /> 
    <input type="button" value="刪除最後一行" id="del"/> 
  </li> 
</ul> 
</body> 
</html>

以上程式碼可以為指定的表格插入一個新行，並在新行中插入單元格。

相關文章