表格操作动画（附回收站效果）

最新推荐文章于 2022-05-30 10:42:43 发布

xiaobai12123

最新推荐文章于 2022-05-30 10:42:43 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery Javascript

本文链接：https://blog.youkuaiyun.com/xiaobai12123/article/details/79018372

Javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

这篇博客介绍了如何实现表格操作的动画效果，包括添加行的动态效果、删除行的淡入动画、批量删除的确认与淡入效果，以及一个完整的回收站系统，展示回收站图标变化和元素移入回收站的动态过程。通过示例和源码，详细展示了这些功能的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体功能
1.添加行
2.删除行（淡入效果）
3.批量删除（确认选择+淡入效果）
4.回收站系统（动态移入回收站，回收站图标变换）
目录结构

总体效果图如下

添加示例

批量删除示例

回收站效果

源码如下

<!DOCTYPE html>  
<html>  
 <head>  
  <title> 表格操作动画系列</title>    
  <meta http-equiv="Content-Type" content="text/html"/>     
  <meta charset="utf-8"/> 
  <style type="text/css">
        #bin1{
            width: 100px;
            height: 100px;
            background:url(".\\回收站空.png");
            -webkit-background-size: 100px 100px;
            float: right;
        }
        #bin2{
            width: 100px;
            height: 100px;
            background:url(".\\回收站满.png");
            -webkit-background-size: 100px 100px;
            float: right;
        }
        #tubiao{
            width: 20px;
            height: 20px;
            background:url(".\\图标.png");
            -webkit-background-size: 20px 20px;
        }

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

      //表格颜色替换
      window.onload = function(){  
         var mytr=document.getElementsByTagName('tr');  
         for (var i =0 ; i <mytr.length; i++) {  
            newcolor(mytr[i]);  
        }     
      }  

      //表格颜色替换（具体）
      function newcolor(mtr) {  
          mtr.onmouseover=function(){  
            mtr.style.backgroundColor="#f2f2f2";  
          }  
          mtr.onmouseout=function(){  
            mtr.style.backgroundColor="#fff";  
          }  
      }  

      //添加一行 
      function addone() { 
        var num = $("tbody tr:last td:eq(1)").html();
        num = parseInt(num)+1;
        var str=prompt("请输入用户名：");  
         //非空判断
        if(str=="") {
          alert("用户名不能为空！");
          num--;
          addone();
          return;
        }
        //非null判断
        if(!str){
            num--;
            return;
        }
        var tr = '<tr>'+
                    '<td>'+
                        '<input type="checkbox" name="biao" value="1">'+
                    '</td>'+
                    '<td>'+num+'</td>'+
                    '<td>'+str+'</td>'+
                    '<td>'+
                        '<a href="javascript:void(0)" onclick="delone01(this)">删除</a> '+
                        '<a href="javascript:void(0)" onclick="delone02(this)">回收站</a>'+
                    '</td>'+
                    '</tr>';
        $("#mainBody").append(tr);
        var mytr=document.getElementsByTagName('tr');  
         for (var i =0 ; i <mytr.length; i++) {  
            newcolor(mytr[i]);  
        }   
      }  

      //普通渐变删除
      function delone01(otr){     
        $(otr).parent().parent().hide(1000,function(){
            $(this).remove();
        })
      }  

      //回收站效果
      function delone02(otr){
        var tr = $(otr).parent().parent();//获取当前tr
        tr.html("<div id='tubiao'></div>");
        tr.css("position","absolute");
        var width = window.innerWidth-25;
        tr.animate({
            left:width,
            top:50,
            width:1,
            height:1
        },2000,function(){
            tr.remove();
            $("#bin1").attr("id","bin2");
        })
      }

      //批量删除
      function toDel(){ 
        var checks = $("input[name='biao']:checked"); 
        if(checks.length==0){
          alert("请选中要删除行！");
        }else{
          if(window.confirm('你确定要删除吗？')){
              checks.each(function(){
                $(this).parent().parent().hide(1000,function(){
                    $(this).remove();
                })
              })
          }else{
              $("input[name='biao']").prop("checked",false);
              return false;
          }
        }
      }
  </script>   
 </head>   
 <body>
    <div id="bin1"></div>
    <input type="button" id="btn1" value="添加一行" onclick="addone()">
    <input type="button" id="btn2" value="批量删除" onclick="toDel()">   
    <table border="1" width="50%" id="table">  
       <tr>
          <th></th>  
          <th>编号</th>  
          <th>用户</th>  
          <th>操作</th>  
       </tr>    
      <tbody id="mainBody">
        <tr class="tr_1">
          <td><input type="checkbox" name="biao" value="1"></td>  
          <td>1</td>  
          <td>宋江</td>  
          <td><a href="javascript:;" onclick="delone01(this)" >删除</a>
          <a href="javascript:;" onclick="delone02(this)" >回收站</a></td>
        </tr>  

        <tr class="tr_2">
          <td><input type="checkbox" name="biao" value="2"></td>  
          <td>2</td>  
          <td>孙悟空</td>  
          <td><a href="javascript:;" onclick="delone01(this)" >删除</a>
          <a href="javascript:;" onclick="delone02(this)" >回收站</a></td>
        </tr>    
      </tbody>
     </table>  

 </body>  
</html>