如何用jquery来实现添加删除表格？

xyflash2 2011-06-01 03:58:09

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="ob">
<tr>
<td valign="top">AAAA<input type="button" name="add" id="add" value="添加" />

<input type="button" name="del" id="del" value="删除" />
</td>
</tr>
</tbody>
<tbody id="nb"></tbody>
</table>

点击添加则将ob中的内容复制到nb中点击删除则对应在nb中做删除操作！

如何用jquery来实现？

...全文

110 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

xyflash2 2011-06-04

打赏
举报

关注！！！！！！！！！！！！！！！

xyflash2 2011-06-02

打赏
举报

需要的是：点击删除只删除“删除”按钮所在行

a260881071 2011-06-01

打赏
举报

http://blog.csdn.net/yanleigis/archive/2009/02/10/3874433.aspx

xyflash2 2011-06-01

打赏
举报

需要的是：点击删除只删除“删除”按钮所在行

zhangxiaoyan06 2011-06-01

打赏
举报



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

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<title>无标题文档</title>

<script language="javascript" type="text/javascript">

	$(document).ready(function(){

		$("input[name='add']").click(function(){

			$("#nb").append($("#ob").html());	

		});	

		$("input[name='del']").click(function(){

			//$("#nb").empty();	//全部删除

			$("#nb").children("tr:last").remove();//删除最新添加的

		});	

	});



</script>

</head>



<body>

<table width="100%" border="5" cellspacing="0" cellpadding="0" style=" border-color:#F00">

  <tbody id="ob" >

  <tr>

  <td valign="top">AAAA<input type="button" name="add"  value="添加" />

    

  <input type="button" name="del" value="删除" />

</td>

  </tr>

  </tbody>

  <tbody id="nb"></tbody>

  </table>

</body>

</html>

zhangxiaoyan06 2011-06-01

打赏
举报



$(document).ready(function(){

		$("input[name='add']").click(function(){

			$("#nb").append($("#ob").html());	

		});	

		$("input[name='del']").click(function(){

			//$("#nb").empty();	//全部删除

			$("#nb").children("tr:last").remove();//删除最新添加的

		});	

	});

ypb137154098 2011-06-01

打赏
举报





  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

<script src="jquery-1.4.4.min.js"></script>

 </head>

  <script type="text/javascript">

  <!--

	 function add(){

	  var content = $("#ob").html();

	  $("#nb").append(content);

	 }



	 function remove(){

	 $("#nb").html("");

	 }

  //-->

  </script>

 <body>

  <table width="100%" border="1" cellspacing="0" cellpadding="0" >

  <tbody id="ob">

  <tr>

  <td valign="top">AAAA</td>

  <td>

   <input type="button" name="add" id="add" value="添加" onclick="add()" />

    

  <input type="button" name="del" id="del" value="删除" onclick="remove()"/>

  </td>

  </tr>

  </tbody>

  <tbody id="nb"></tbody>

  </table>



 </body>

</html>