<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>动态添加删除table的一行</title> <script type="text/javascript"><!-- var newRowIndex=2; //被插入的行索引 //插入一行 function insertRow(tableID/*被插入一行的表的ID*/) { //debugger; //var table = document.getElementById(tableID); var Rows=tableID.rows;//类似数组的Rows var newRow=tableID.insertRow(newRowIndex/*table.rows.length*/);//插入新的一行 for (i=0;i<3;i++)//填入每列数据 { var newCell=Rows(newRow.rowIndex).insertCell(/*Cells.length*/); newCell.align="center"; newCell.innerHTML=Rows(newRowIndex-1).cells(i).innerHTML; }//for end newRowIndex++; } //删除一行 function deleteRow (tableID, rowIndex) { //var table = document.getElementById(tableID); tableID.deleteRow(rowIndex); newRowIndex--;//维护全局变量 } // --></script> </head> <body> <form action=""> <table border="0" cellspacing="0" cellpadding="0" width="98%" align="center"> <tr valign="top"> <th> <input value="添加" type="button" οnclick="insertRow(table1)" /> </th> </tr> </table> <br /> <table border="1" width="98%" align="center" id="table1"> <tr> <th>顺序号</th> <th>项目序号</th> <th>删除</th> </tr> <tr id="insertedRow" align="center" style="display:none;" mce_style="display:none;"> <!--隐藏这行做为模板--> <td><input id="textid" type="text" value="button" /></td> <td>模板</td> <td><a href="#" mce_href="#" οnclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">删除本行</a></td> </tr> <tr id="Tr1" align="center"> <td><input id="text1" type="text" value="button" /></td> <td>已有行</td> <td><a href="#" mce_href="#" οnclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">删除本行</a></td> </tr> <tr id="Tr2" align="center"> <td><input id="text2" type="text" value="button" /></td> <td>已有行</td> <td><a href="#" mce_href="#" οnclick="deleteRow(table1,this.parentElement.parentElement.rowIndex)">删除本行</a></td> </tr> <tr> <td>最后一行</td> <td>最后一行</td> <td>最后一行</td> </tr> </table> </form> </body> </html>