<!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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步