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

 <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
//表格隔行换色
$(document).ready(function(){
$(".tablebg1 tr:odd").addClass("tabodd1");
$(".tablebg1 tr").mouseover(function(){
$(this).addClass("change");
})
$(".tablebg1 tr").mouseout(function(){
$(this).removeClass("change");
})
$(".tablebg1 tr:even").addClass("tabodd2")
}); </script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ margin:0; padding:20px 100px; font:14px Arial, Helvetica, sans-serif;}
.calendar_tab table { border-left: #E8E8E8 solid 1px; border-top: #E8E8E8 solid 1px; border-collapse: collapse; margin:10px 0;}
.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;}
.calendar_tab table th a{ color:#fff; text-decoration:underline;}
.calendar_tab table th a:hover{ color:#fff; text-decoration:none;}
.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;}
.calendar_tab table td a{ color:#0096d6; text-decoration:underline;}
.calendar_tab table td a:hover{ color:#0096d6; text-decoration:none;} .tabodd1{ background:#fff;}
.tabodd2{ background:#F8F8F8;}
.change{ background:#f0f0f0;} </style>
<div class="calendar_tab">
<table width="100%" id="tablebg1" class="tablebg1" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="28%">日期 </th>
<th width="72%">选择</th>
</tr>
<tr>
<td>2013-7-01 </td>
<td><select name="select">
<option>工作日</option>
</select></td>
</tr>
<tr>
<td>2013-7-01 </td>
<td><select name="select">
<option>工作日</option>
</select></td>
</tr>
</table>
</div>

菜鸟示例:

日期 选择
2013-7-01 工作日
2013-7-01 工作日

table隔行换色的更多相关文章

  1. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  2. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. php29号小结(隔行换色······)

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

  4. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  5. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  8. JS应用实例4:表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. jQuery的基本过滤器与jQuery实现隔行换色实例

    没加过滤器之前: 加过滤器之后: 总的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

随机推荐

  1. 提高你的Java代码质量吧:如果有必要,使用变长数组吧

    一.分析  Java中的数组是定长的,一旦经过初始化声明就不可改变长度,这在实际使用中非常不方便. 二.场景  比如要对班级学生的信息进行统计,因为我们不知道一个班级会有多少学生(随时都有可能会有学生 ...

  2. paip.mysql备份慢的解决

    paip.mysql备份慢的解决.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/att ...

  3. [MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1

    BIG FUCK for MODx MODx document is not that good  ...  at least in my opint of view. I spend hours t ...

  4. PROC简单的用例--VC连接ORACLE

    操作系统:windows 7 数据库版本号:oracle 10g VS版本号:VS2010 前言:连接ORACLE有许多方法,这里只PROC外壳,说明如何连接oracle,有事吗,希望你告诉我指出,一 ...

  5. JavaScript笔记 第十六章 匿名函数和闭包

    1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数. 一.匿名函数 //普通函数 function getName() { return 'name'; } a ...

  6. C#_datatable 写入大量数据_BulkCopy

    using Microsoft.Win32; using System; using System.Collections.Generic; using System.Configuration; u ...

  7. python列表删除重复元素的三种方法

    给定一个列表,要求删除列表中重复元素. listA = ['python','语','言','是','一','门','动','态','语','言'] 方法1,对列表调用排序,从末尾依次比较相邻两个元素 ...

  8. 学习jQuery后的部分总结

    1.remove和empty <div id="div1"> <ul id="ul1"> <li>嘿嘿</li> ...

  9. C语言位运算符:与、或、异或、取反,左移和右移

    C语言位运算符:与.或.异或.取反.左移和右移 个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类型. ,则该位的结果值为1,否则为0 | ...

  10. 在 Ubuntu 16.04 中安装谷歌 Chrome 浏览器

    进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或&q ...