JS动态添加Table的TR，TD实现方法

时间：2021-01-08 12:18:08|栏目：JavaScript代码|点击：次

本文实例讲述了JS动态添加Table的TR，TD实现方法。分享给大家供大家参考。具体实现方法如下：

 <html>  
 
 <head> 
 
 <title></title> 
 
 <SCRIPT language="JavaScript"> 
 
 var tempRow=0; 
 
 var maxRows=0; 
 
 function insertRows(){ 
 
 tempRow=table1.rows.length-1; 
 
 maxRows=tempRow; 
 
 tempRow=tempRow+1; 
 
 var Rows=table1.rows;//类似数组的Rows 
 
 var newRow=table1.insertRow(table1.rows.length);//插入新的一行 
 
 var Cells=newRow.cells;//类似数组的Cells 
 
 for (i=0;i<2;i++)//每行的7列数据 
 
 { 
 
 var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
 
 newCell.align="center"; 
 
 switch (i) 
 
 { 
 
 case 0: newCell.innerHTML="<td valign='top'>corpName</TD>"; break; 
 
 case 1 : newCell.innerHTML="<td valign='top'><a href='javascript:delTableRow(\""+tempRow+"\")'>删除</a></TD>"; break; 
 
 } 
 
 } 
 
 maxRows+=1; 
 
 } 
 
 function delTableRow(rowNum){ 
 
 if (table1.rows.length >rowNum){ 
 
 table1.deleteRow(rowNum); 
 
 } 
 
 } 
 
 </SCRIPT> 
 
 </head> 
 
 <body> 
 
 <form action=""> 
 
 <table border="0" cellspacing="0" cellpadding="0" width="98%" align="center"> 
 
 <tr valign="top"> 
 
 <th> 
 
 <input value="添加" type="button" onclick="insertRows()"> 
 
 </th> 
 
 </tr> 
 
 </table> 
 
 <br /> 
 
 <table border="1" width="98%" align="center" id="table1"> 
 
 <tr> 
 
 <th >企业名称</th> 
 
 <th>操作<th> 
 
 </tr> 
 
 </table> 
 
 </form> 
 
 </body> 
 
 </html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：Javascript实现的简单右键菜单类

栏目：JavaScript代码

下一篇：js文字横向滚动特效

本文标题：JS动态添加Table的TR，TD实现方法

本文地址：http://www.codeinn.net/misctech/42048.html

更多JavaScript代码

JavaScript代码

JS动态添加Table的TR，TD实现方法

阅读排行

推荐教程