文章导航

JavaScript insertRow()

2018-11-4 11:25| 作者: admin| 查看: 1148| 评论: 0|来自: 蚂蚁部落

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

语法结构:

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部