以前做表格隔行换色,是在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 |