表格操作动画(附回收站效果)

具体功能
1.添加行
2.删除行(淡入效果)
3.批量删除(确认选择+淡入效果)
4.回收站系统(动态移入回收站,回收站图标变换)
目录结构
表格操作动画(附回收站效果)_第1张图片
总体效果图如下
这里写图片描述
添加示例
这里写图片描述
批量删除示例
这里写图片描述
回收站效果
这里写图片描述
源码如下

  
<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 //表格颜色替换(具体)
      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 = ''+
                    ''+
                        ''+
                    ''+
                    ''+num+''+
                    ''+str+''+
                    ''+
                        '删除 '+
                        '回收站'+
                    ''+
                    '';
        $("#mainBody").append(tr);
        var mytr=document.getElementsByTagName('tr');  
         for (var i =0 ; i //普通渐变删除
      function delone01(otr){     
        $(otr).parent().parent().hide(1000,function(){
            $(this).remove();
        })
      }  

      //回收站效果
      function delone02(otr){
        var tr = $(otr).parent().parent();//获取当前tr
        tr.html("
"
); 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>1td> <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>2td> <td>孙悟空td> <td><a href="javascript:;" onclick="delone01(this)" >删除a> <a href="javascript:;" onclick="delone02(this)" >回收站a>td> tr> tbody> table> body> html>

你可能感兴趣的:(jquery,Javascript)