jQuery实现表格隔行变色，以及全选按钮，全不选按钮，反选按钮

最新推荐文章于 2021-07-24 11:37:00 发布

ytm1996

最新推荐文章于 2021-07-24 11:37:00 发布

阅读量270

点赞数 1

本文链接：https://blog.csdn.net/ytm1996/article/details/80320112

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .oddTr {
               background-color: white;
           }

           .evenTr {
               background-color: #e1e1e1;
           }

           .curTr {
               background-color: yellow;
           }
       </style>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {
               for(i = 1; i <= 10; i++) {
                   $("tbody").append("<tr><td><input type='checkbox' value='"+i+"'/></td><td>" + i + "</td><td>" + i * i + "</td></tr>")
               }
               //隔行变色
               $("tbody tr:even").addClass("evenTr");
               $("tbody tr:odd").addClass("oddTr");

               //滑动变色
               $("tbody tr").each(function() {
                   $(this).hover(function() {
                       $(this).addClass("curTr");
                   })
                   $(this).mouseout(function() {
                       $(this).removeClass("curTr")
                   })
                   $(this).dblclick(function() {
                       alert((this).find("td:eq(1)").text())
                   })
               })

               //全选
               $("#selestAll").click(function(){
                   $("input[type='checkbox']").prop("checked","checked")
               })

               //全不选
               $("#selestNone").click(function(){
                   $("input[type='checkbox']").prop("checked","")
               })

               //反选
               $("#selestOpposite").click(function(){
                   $("input[type='checkbox']").each(function(){
                       $(this).prop("checked",!$(this).prop("checked"))
                   })
               })





           })



       </script>
   </head>

   <body>
       <table border="" cellspacing="" cellpadding="">
           <tbody>
               <thead><tr>
               <th>Header</th>
               <th>Data</th>
               <th>Data</th>
           </tr></thead>
           </tbody>

       </table>

       <button id="selestAll">全选</button>
       <button id="selestNone">全不选</button >
       <button id="selestOpposite">反选</button>

   </body>

</html>