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
  • 相关阅读:
    BZOJ 3506 机械排序臂 splay
    BZOJ 2843 LCT
    BZOJ 3669 魔法森林
    BZOJ 2049 LCT
    BZOJ 3223 文艺平衡树 splay
    BZOJ 1433 假期的宿舍 二分图匹配
    BZOJ 1051 受欢迎的牛 强连通块
    BZOJ 1503 郁闷的出纳员 treap
    BZOJ 1096 ZJOI2007 仓库设计 斜率优化dp
    BZOJ 1396: 识别子串( 后缀数组 + 线段树 )
  • 原文地址:https://www.cnblogs.com/share1987/p/3275318.html
Copyright © 2011-2022 走看看