<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js"></script> </head> <body> <table border="1px" width="500px" align="center"> <tr> <td><input type="checkbox" id="all"/></td> <td>商品名称</td> <td>商品价格</td> <td>商品数量</td> <td>商品操作</td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18000</td> <td>20</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18000</td> <td>20</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18000</td> <td>20</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18000</td> <td>20</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> </table> </body> <script> $("#all").click(function () { $(".one").prop("checked", $("#all").prop("checked")); //将最上面checkbox的属性值传递给下面的checkbox的属性 }) $("tr:even").css("backgroundColor", "green"); $("tr:odd").css("backgroundColor", "yellow"); var c = null; $("tr").mouseover(function () { c = $(this).css("backgroundColor"); //换色之前先拿到之前的颜色； $(this).css("backgroundColor", "red"); }) $("tr").mouseout(function () { this.style.backgroundColor = c }) //动画效果 setInterval(function () { $("table").hide(3000,"swing",function () { //退出时间用3″，退出后执行下一个function setInterval(function () { $("table").show() }) }) },3000) //3″后退出 </script> </html>