以前做表格隔行换色,是在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. HDU 1718 Rank counting sort解法

    本题是利用counting sort的思想去解题. 注意本题,好像利用直接排序,然后查找rank是会直接被判WA的.奇怪的推断系统. 由于分数值的范围是0到100,很小,而student 号码又很大, ...

  2. c++ 操作注冊表

    1.       注冊表简单介绍 注冊表是为Windows NT和Windows95中全部32位硬件/驱动和32位应用程序设计的数据文件,用于存储系统和应用程序的设置信息.16位驱动在Winnt (W ...

  3. android实现弧形进度表盘效果

    附件:Cirbar.rar

  4. iOS开发——基本常识篇&各种控件默认高度

    各种控件默认高度   1.状态栏 状态栏一般高度为20像素,在打手机或者显示消息时会放大到40像素高,注意,两倍高度的状态栏在好像只能在纵向的模式下使用.如下图 用户可以隐藏状态栏,也可以将状态栏设置 ...

  5. C++ Primer 学习笔记_95_用于大型程序的工具 --多重继承与虚继承

    用于大型程序的工具 --多重继承与虚继承 引言: 大多数应用程序使用单个基类的公用继承,可是,在某些情况下,单继承是不够用的,由于可能无法为问题域建模,或者会对模型带来不必要的复杂性. 在这些情况下, ...

  6. [Effective C++ --011]在operator=中处理“自我赋值”

    一.何谓“自我赋值”? 1.1.场合一 直接赋值 w = w; 1.2.场合二 同一数组         a[i] = a[j]: 1.3.场合三 指针         *px = *py: 1.4. ...

  7. android离线安装adt

    打开Eclipse, 在菜单栏上选择help->Install New SoftWare 出现如下界面: 点击 Add按钮,出现如下界面 在Name这而随意输入一个名字:ADT15:点击打开Ar ...

  8. 转--xcode duplicate symbol问题

    遇到引用库重复定义的问题,需要解决.   项目需要,同时引用ZBar和QQ授权登录SDK,由于二者均使用了Base64处理数据,XCode编译时报错: duplicate symbol _base64 ...

  9. iOS 中使用.9图

    背景 .9图来源于Android.为了设计出一套图,兼容Android和iOS,使用.9图的方式来对图片进行拉伸以适应不同的屏幕.在iOS中没有.9图的概念,只能先了解Android的.9图再进行模拟 ...

  10. 修改UILabel的行间距

    在iOS开发中  有时候为了调整一些UI效果  我们需要调整UILabel之间的行间距: contentLabel.text:label上显示的文字内容; 5:label行间距; contentLab ...