具体功能 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>