zoukankan      html  css  js  c++  java
  • table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色

     1 <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
     2 <script type="text/javascript">
     3 //表格隔行换色
     4 $(document).ready(function(){
     5 $(".tablebg1 tr:odd").addClass("tabodd1");
     6 $(".tablebg1 tr").mouseover(function(){
     7     $(this).addClass("change");
     8     })
     9 $(".tablebg1 tr").mouseout(function(){
    10     $(this).removeClass("change");
    11     })
    12 $(".tablebg1 tr:even").addClass("tabodd2")
    13 });
    14 
    15 </script>
    16 <style type="text/css">
    17 *{ margin:0; padding:0;}
    18 body{ margin:0; padding:20px 100px; font:14px Arial, Helvetica, sans-serif;}
    19 .calendar_tab table { border-left: #E8E8E8 solid 1px; border-top: #E8E8E8 solid 1px; border-collapse: collapse; margin:10px 0;}
    20 .calendar_tab table th { border-right: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #525254; padding:5px 8px; color:#fff; white-space:nowrap; font-weight:bold;}
    21 .calendar_tab table th a{ color:#fff; text-decoration:underline;}
    22 .calendar_tab table th a:hover{ color:#fff; text-decoration:none;}
    23 .calendar_tab table td { height:auto; border-right: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; padding:5px 8px; vertical-align:middle; white-space:nowrap;}
    24 .calendar_tab table td a{ color:#0096d6; text-decoration:underline;}
    25 .calendar_tab table td a:hover{ color:#0096d6; text-decoration:none;}
    26 
    27 .tabodd1{ background:#fff;}
    28 .tabodd2{ background:#F8F8F8;}
    29 .change{ background:#f0f0f0;}
    30 
    31 </style>
    32 <div class="calendar_tab">
    33 <table width="100%" id="tablebg1" class="tablebg1" border="0" cellspacing="0" cellpadding="0">
    34         <tr>
    35           <th width="28%">日期 </th>
    36           <th width="72%">选择</th>
    37         </tr>
    38         <tr>
    39           <td>2013-7-01 </td>
    40           <td><select name="select">
    41               <option>工作日</option>
    42             </select></td>
    43         </tr>
    44         <tr>
    45           <td>2013-7-01 </td>
    46           <td><select name="select">
    47               <option>工作日</option>
    48             </select></td>
    49         </tr>
    50       </table>
    51       </div>

    菜鸟示例:

    日期选择
    2013-7-01
    2013-7-01
  • 相关阅读:
    【Linux 内核网络协议栈源码剖析】数据包发送
    【Linux 内核网络协议栈源码剖析】connect 函数剖析(一)
    【Henu ACM Round#14 C】Duff and Weight Lifting
    【Henu ACM Round#14 B】Duff in Love
    【Henu ACM Round#14 A】Vitaly and Night
    【Henu ACM Round #13 E】Spy Syndrome 2
    【Henu ACM Round #13 F】Fibonacci-ish
    【Henu ACM Round #13 D】A Trivial Problem
    【Henu ACM Round #13 C】 Ebony and Ivory
    【Henu ACM Round #13 B】Spider Man
  • 原文地址:https://www.cnblogs.com/share1987/p/3275318.html
Copyright © 2011-2022 走看看