当前位置: 代码迷 >> Web前端 >> 动态平添和删除table行
  详细解决方案

动态平添和删除table行

热度:50   发布时间:2012-10-31 14:37:31.0
动态添加和删除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>
  相关解决方案