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

<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="添加" />
      &nbsp;&nbsp;
      <input type="button" name="del" id="del" value="删除" />
</td>
    </tr>
  </tbody>
  <tbody id="nb"></tbody>
  </table>
点击添加 则将ob中的内容复制到nb中 点击删除则 对应在nb中做删除操作！如何用jquery来实现？

解决方案 »

  1.   

      <!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()" />
      &nbsp;&nbsp;
      <input type="button" name="del" id="del" value="删除" onclick="remove()"/>
      </td>
      </tr>
      </tbody>
      <tbody id="nb"></tbody>
      </table> </body>
    </html>
      

  2.   


    $(document).ready(function(){
    $("input[name='add']").click(function(){
    $("#nb").append($("#ob").html());
    });
    $("input[name='del']").click(function(){
    //$("#nb").empty(); //全部删除
    $("#nb").children("tr:last").remove();//删除最新添加的
    });
    });
      

  3.   


    <!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="添加" />
      &nbsp;&nbsp;
      <input type="button" name="del" value="删除" />
    </td>
      </tr>
      </tbody>
      <tbody id="nb"></tbody>
      </table>
    </body>
    </html>
      

  4.   

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