jquery 实现增加一行tr,删除一行tr

<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加减tr</title>
    <script src="jquery.1.12.js"></script>
</head>
<body>
   <center>
       <table id="box" border='1'>
           <tr>
               <td>ID</td>
               <td>姓名</td>
               <td>职业</td>
               <td>薪水</td>
           </tr>
           <tr>
               <td>1</td>
               <td>张三</td>
               <td>php工程师</td>
               <td>20k</td>
               <td><a href="javascript:void(0);" class="deltr">-移除</a></td>
           </tr>
           <tr>
               <td><a href="javascript:void(0);" class="addtr">+新增</a></td>
           </tr>
       </table>
   </center>

    
</body>
<script>
     $(".addtr").click(function(){
         //    //注意::反斜杠可以转译
      //   var html="<tr>\
               // <td>1</td>\
               // <td>张三</td>\
               // <td>php工程师</td>\
               // <td>20k</td>\
               // <td>-</td>\
            //        </tr>";
            // $(this).parents('tr').prev().after(html);
            // 第二种新增方法
            var _this=$(this).parents('tr').prev();
            var otr=_this.clone();
                _this.after(otr);

     })
         //单独给clss选择器,是不能够删除克隆后的元素的
         //如果在上面的clone()里加true,难么此注释的代码可以实现删除一行
         //克隆如果不加true说明只克隆元素不克隆事件
     // $(".deltr").click(function(){
     //      $(this).parents("tr").remove();
     // })
     

      //需要把移除绑定到加载函数内(委托事件)
      $(document).on('click','.deltr',function(){
          //当前元素的父级的父级的元素(一行,移除
          $(this).parents("tr").remove();
      })
    
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值