你的位置:首页 > Java教程

[Java教程]js在指定的table表格行后面添加新行


js在指定的table表格行后面添加新行:
有时候在实际应用中,需要在表格的指定行后面添加指定的行,下面就通过代码实例进行一下简单介绍,当然实现此效果的方式可能有很多种,这里只介绍其中的一种方式,代码实例如下:

 

<!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.insertRow()函数可以参阅js的insertRow()函数用法简单介绍一章节。
2. insertCell()函数可以参阅js的insertCell()函数简单介绍一章节。 

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

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