以前做表格隔行换色,是在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. js判断一个字符串是否在另一个字符串中存在 indexOf

    使用indexOf来实现.当返回值为-1时表示不存在. 举例: var href = 'www.51qdq.com';alert(href.indexOf('test')); //返回值 -1aler ...

  2. [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this les ...

  3. Behavioral模式State模式

    1.意向 同意一个目标,然后改变其内部状态,改变它的行为. 对象似乎改变它的类别. 2.别名 状态对象(Objects for States) 3.动机 考虑一个表示网络连接的类TCPConnecti ...

  4. OSI七层模型具体解释

    OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯,因此其最基本的功能就是帮助不同类型的主机实现传输数据 . 完毕中继功能的节点通常称为中继系统.在OSI七层模型中,处于 ...

  5. android129 zhihuibeijing 聊天机器人

    上屏幕界面activity_main.xml: 语音识别界面 <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  6. Centos 6.4 python 2.6 升级到 3.5.2

    查看python的版本 #python -V Python 1.下载Python-2.5.2 #wget https://www.python.org/ftp/python/3.5.2/Python- ...

  7. NUMA CPU optimization

    technologies:  OS, CPU cache, numa structure, memory access

  8. 页面javascript 和jquery 的一些用法

    confirm:提交之前的提示验证 if(confirm("确认是否提交?")){ alert("确认提交..."); } input按钮的禁用: $(&quo ...

  9. java 注解Annotation

    什么是注解?  注解,顾名思义,注解,就是对某一事物进行添加注释说明,会存放一些信息,这些信息可能对以后某个时段来说是很有用处的. java注解又叫java标注,java提供了一套机制,使得我们可以对 ...

  10. zookeeper实现互斥锁

    简单的说,zookeeper就是为了解决集群环境中数据一致性的问题. 举个很简单栗子: 有一个变量A,分别存在于两台服务器中,某个程序需要用到变量A,就随机地访问其中一台服务器并取得变量A的值,对吧? ...