读书人

动态平添和删除table行

发布时间: 2012-10-31 14:37:31 作者: rapoo

动态添加和删除table行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT=""><SCRIPT LANGUAGE="JavaScript">function add(){var tb = document.getElementById("tb");var copyRow = document.getElementById("copyRow");var cloneRow = copyRow.cloneNode(true);tb.rows[tb.rows.length-1].insertAdjacentElement("afterEnd",cloneRow);}function del(){var rowActive = document.activeElement.parentElement.parentElement;var tb = document.getElementById("tb");tb.deleteRow(rowActive.rowIndex);}</SCRIPT> </HEAD> <BODY>  <TABLE id="tb" border="1">  <tr> <TD><INPUT TYPE="text" NAME=""></TD><TD>bbbbb</TD><TD>cccccccc</TD><TD>cccccccc</TD><TD>cccccccc</TD><TD>cccccccc</TD>  </tr>  <TR id="copyRow"><TD><INPUT TYPE="text" NAME=""></TD><TD>bbbbb</TD><TD>cccccccc</TD><td colspan="3"><INPUT TYPE="button" VALUE="添加" ONCLICK="add()"><INPUT TYPE="button" VALUE="删除" ONCLICK="del()"></td>  </TR>  <TR><TD>dddddddd</TD><TD> <INPUT TYPE="text" NAME=""></TD><TD>fffffff</TD><td colspan="3"><INPUT TYPE="button" VALUE="添加" ONCLICK="add()"><INPUT TYPE="button" VALUE="删除" ONCLICK="del()"></td>  </TR>  </TABLE> </BODY></HTML>

读书人网 >Web前端

热点推荐