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
  • 相关阅读:
    python的os模块命令
    python的os模块
    albert1017 Linux下压缩某个文件夹(文件夹打包)
    装饰器加不加()
    json和jsonp解决跨域传输数据等
    wsgi
    flask建立数据模型数据类型
    爬虫中
    javaweb学习总结(四)——Http协议
    JavaWeb学习总结(三)——Tomcat服务器学习和使用(二)
  • 原文地址:https://www.cnblogs.com/share1987/p/3275318.html
Copyright © 2011-2022 走看看