JavaScript insertRow()

小灰灰 2020-06-02 15:05 641阅读 0赞

# JavaScript insertRow()

此方法可以创建并在表格的指定位置插入一个新行。

语法结构：

```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.dandelioncloud.cn/" /> 
<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>
```

以上代码可以为指定的表格插入一个新行，并在新行中插入单元格。