动态添加和删除table行

最新推荐文章于 2021-02-16 16:35:19 发布

zwllxs

最新推荐文章于 2021-02-16 16:35:19 发布

阅读量148

点赞数

分类专栏： javascript 文章标签： java javascript ViewUI

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>

zwllxs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态添加和删除table行

[code="java"] New Document function add() { var tb = document.getElementById("tb"); var copyRow = document.getElementById("copyRow"); var cloneRow = copyRow....
复制链接

扫一扫

专栏目录