zoukankan      html  css  js  c++  java
  • 表格隔行换色及删除后仍隔行换色效果(好别扭的标题。。。)

    表格隔行换色,有多种写法,可以通过jquery来写,也可以用css3实现。

    1.jquery方法

    odd,奇数;even,偶数

    方法很简单

    $("tr:odd").css({background:"#c66",color:"#fff"});
    $('tr:even').css({background:"#fff",color:"#333"});

    但是如果删除后,两个一样背景的tr会挨上,怎么解决呢?可以将换行写到一个方法里,在删除事件中,调用换行方法,代码如下:

     1 <!doctype html>
     2 <html>
     3     <head>
     4         <meta http-equiv="content-type" content="text/html charset=utf-8" />
     5         <title>模拟滚动条</title>
     6     </head>
     7     <style type="text/css">
     8         *{padding: 0;margin: 0;border:0;}
     9         table{width: 600px;margin: 20px auto;border:1px solid #c66;border-collapse:collapse;}
    10         tr{text-align: center;height: 30px;border:0;}
    11 
    12     </style>
    13     <body>
    14         <table border="0">
    15             <thead>
    16                 <th>姓名</th>
    17                 <th>年龄</th>
    18                 <th>昵称</th>
    19                 <th>工作</th>
    20                 <th>操作</th>
    21             </thead>
    22             <tbody>
    23                 <tr>
    24                     <td>silence</td>
    25                     <td>20</td>
    26                     <td>ss</td>
    27                     <td>web</td>
    28                     <td><a href="#">删除</a></td>
    29                 </tr>
    30                 <tr>
    31                     <td>seraph</td>
    32                     <td>21</td>
    33                     <td>se</td>
    34                     <td>web</td>
    35                     <td><a href="#">删除</a></td>
    36                 </tr>
    37                 <tr>
    38                     <td>rain</td>
    39                     <td>22</td>
    40                     <td>rr</td>
    41                     <td>java</td>
    42                     <td><a href="#">删除</a></td>
    43                 </tr>
    44                 <tr>
    45                     <td>snow</td>
    46                     <td>21</td>
    47                     <td>sn</td>
    48                     <td>asp</td>
    49                     <td><a href="#">删除</a></td>
    50                 </tr>
    51                 <tr>
    52                     <td>cloud</td>
    53                     <td>18</td>
    54                     <td>cc</td>
    55                     <td>web</td>
    56                     <td><a href="#">删除</a></td>
    57                 </tr>
    58                 <tr>
    59                     <td>winter</td>
    60                     <td>25</td>
    61                     <td>win</td>
    62                     <td>jsp</td>
    63                     <td><a href="#">删除</a></td>
    64                 </tr>
    65             </tbody>
    66         </table>
    67         <script src="jquery-1.8.3.min.js"></script>
    68         <script type="text/javascript">
    69             function changeColor(){
    70                 $("tr:odd").css({background:"#c66",color:"#fff"});
    71                 $('tr:even').css({background:"#fff",color:"#333"});
    72             };
    73             var color;
    74             $("tr").hover(function(){
    75                 color=$(this).css('background-color');
    76                 $(this).css('background','#ccc');
    77             },function(){
    78                 $(this).css('background',color);
    79             })
    80             $('tr td a').live('click',function(e){
    81                 
    82                 $(this).parent().parent().remove();
    83                 changeColor();
    84             });
    85             $(function(){
    86                 changeColor();
    87             })
    88             
    89         </script>
    90     </body>
    91 </html>

    2.css3方法

    用到nth-of-type方法,nth-of-type(n)选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.

    具体代码如下:

     1 <!doctype html>
     2 <html>
     3     <head>
     4         <meta http-equiv="content-type" content="text/html charset=utf-8" />
     5         <title>模拟滚动条</title>
     6     </head>
     7     <style type="text/css">
     8         *{padding: 0;margin: 0;border:0;}
     9         table{width: 600px;margin: 20px auto;border:1px solid #c66;border-collapse:collapse;}
    10         tr{text-align: center;height: 30px;border:0;}
    11         tbody tr:nth-of-type(odd){background:#c66;color:#fff; }
    12         tbody tr:nth-of-type(even){background:#fff;color:#333; }
    13     </style>
    14     <body>
    15         <table border="0">
    16             <thead>
    17                 <th>姓名</th>
    18                 <th>年龄</th>
    19                 <th>昵称</th>
    20                 <th>工作</th>
    21                 <th>操作</th>
    22             </thead>
    23             <tbody>
    24                 <tr>
    25                     <td>silence</td>
    26                     <td>20</td>
    27                     <td>ss</td>
    28                     <td>web</td>
    29                     <td><a href="#">删除</a></td>
    30                 </tr>
    31                 <tr>
    32                     <td>seraph</td>
    33                     <td>21</td>
    34                     <td>se</td>
    35                     <td>web</td>
    36                     <td><a href="#">删除</a></td>
    37                 </tr>
    38                 <tr>
    39                     <td>rain</td>
    40                     <td>22</td>
    41                     <td>rr</td>
    42                     <td>java</td>
    43                     <td><a href="#">删除</a></td>
    44                 </tr>
    45                 <tr>
    46                     <td>snow</td>
    47                     <td>21</td>
    48                     <td>sn</td>
    49                     <td>asp</td>
    50                     <td><a href="#">删除</a></td>
    51                 </tr>
    52                 <tr>
    53                     <td>cloud</td>
    54                     <td>18</td>
    55                     <td>cc</td>
    56                     <td>web</td>
    57                     <td><a href="#">删除</a></td>
    58                 </tr>
    59                 <tr>
    60                     <td>winter</td>
    61                     <td>25</td>
    62                     <td>win</td>
    63                     <td>jsp</td>
    64                     <td><a href="#">删除</a></td>
    65                 </tr>
    66             </tbody>
    67         </table>
    68         <script src="jquery-1.8.3.min.js"></script>
    69         <script type="text/javascript">
    70             var color;
    71             $("tr").hover(function(){
    72                 color=$(this).css('background-color');
    73                 $(this).css('background','#ccc');
    74             },function(){
    75                 $(this).css('background',color);
    76             })
    77             $('tr td a').live('click',function(e){
    78                 $(this).parent().parent().remove();
    79                 $('tbody tr:nth-of-type(odd)').css({background:'#c66',color:'#fff'});
    80                 $('tbody tr:nth-of-type(even)').css({background:'#fff',color:'#333'});
    81             });
    82         </script>
    83     </body>
    84 </html>

    记录下每天的积累,超越昨天的自己。

  • 相关阅读:
    C#取枚举描述
    JSON数组操作
    .NET DES 加密
    MVC返回图片
    with check option
    HashSet<T>类
    Repository模式
    C#泛型集合之Dictionary<k, v>使用技巧
    权限管理——在线列表
    数据库锁
  • 原文地址:https://www.cnblogs.com/MissBean/p/4103503.html
Copyright © 2011-2022 走看看