你的位置:首页 > Java教程

[Java教程]js insertRow()函数用法简单介绍


js的insertRow()函数用法简单介绍:
此函数可以在table表格的指定位置插入一个新行tr。
语法结构:

tableObject.insertRow(index)

参数说明:
1.tableObject:表格对象。
2.index:要插入行的位置。新的行tr将会被插入到位于index位置行前面的位置。
此函数的返回值是一个新的行对象。
特别注意:
1.如果参数index小于0或大于等于行中的的表元数,则报错。
2.如果table是空的,则新航将被插入到一个新<tbody>中,同时tbody>会被插入表中。
代码实例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>insertRow()函数-蚂蚁部落</title> <script type="text/javascript"> function insRow(){  var otable=document.getElementById("thetable"); var R=otable.insertRow(1); var left=R.insertCell(0); var right=R.insertCell(1);   left.innerHTML="div教程"; right.innerHTML="SEO教程";} window.onload=function(){  var bt=document.getElementById("bt");  bt.onclick=function(){   insRow()  } } </script> </head> <body> <table border="1" id="thetable">  <tr id="top">   <th>蚂蚁部落一</th>   <th>蚂蚁部落二</th>  </tr>  <tr id="bottom">   <td>javascript教程</td>   <td>jQuery教程</td>  </tr> </table> <br /> <input type="button" id="bt" value="插入行"/> </body> </html>

以上代码可以在指定的行插入一个新的行,代码比较简单这里就不多介绍了。
相关阅读:
1.insertCell()函数可以参阅js的insertCell()函数简答介绍一章节。 
2.onclick事件可以参阅javascript的onclick事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10554

更多内容可以参阅;http://www.softwhy.com/javascript/