• 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
  • 相关阅读:
    pyqt5 树节点点击实现多窗口切换
    pyglet self.
    itchat key
    python队列Queue
    Python建立多线程任务并获取每个线程返回值
    利用Python实现多线程聊天功能
    Python3.5+PyQt5多线程+itchat实现微信防撤回桌面版代码
    pyglet player sound
    文件打开的几种访问模式
    pyglet StaticSource
  • 原文地址:https://www.cnblogs.com/share1987/p/3275318.html
Copyright © 2020-2023  润新知