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

最新推荐文章于 2024-02-05 09:36:32 发布

fcjboke

最新推荐文章于 2024-02-05 09:36:32 发布

阅读量6.4k

点赞数 1

分类专栏： php

本文链接：https://blog.csdn.net/qq_35835160/article/details/52709701

版权

php 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

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