table隔行换色
以前做表格隔行换色,是在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隔行换色的更多相关文章
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- php29号小结(隔行换色······)
1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- JQuery案例一:实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- jQuery应用实例2:表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- JS应用实例4:表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- jQuery的基本过滤器与jQuery实现隔行换色实例
没加过滤器之前: 加过滤器之后: 总的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
随机推荐
- XML文件
XML 指可扩展标记语言(eXtensible Markup Language) XML 被设计用来传输和存储数据. 什么是 XML? XML 指可扩展标记语言 XML 是一种标记语言,非常类似 HT ...
- hadoop学习;block数据块;mapreduce实现样例;UnsupportedClassVersionError异常;关联项目源代码
对于开源的东东,尤其是刚出来不久,我认为最好的学习方式就是能够看源代码和doc,測试它的样例 为了方便查看源代码,关联导入源代码的项目 先前的项目导入源代码是关联了源代码文件 block数据块,在配置 ...
- 【25】考虑写出一个不抛异常的swap函数
1.swap交换对象值,std提供了实现方法模版的实现,它的实现是交换对象值. namespace std { template<typename T> void swap(T& ...
- Spring3之MVC
模式-视图-控制器(MVC)是UI设计中常见的设计模式, 该模式区分应用程序中的模式.视图和控制器三个角色,消除了业务逻辑与UI的耦合.模式负责封装视图展示的应用数据.视图应该只显示数据,不包含任何业 ...
- javascript笔记07:使用Object类为实例定义方法和属性
function Person() {} Person.prototype = { nickName:"john", , showInfo:function() { return ...
- ios运行某些工程时屏幕上下出现黑边的解决办法
今天准备了解下MVVM设计模式,于是就从GitHub上Down了一个MVVM的demo(地址在这)学习,下载之后,在模拟器上运行一下,出现如下图上下有黑边,以前也遇到过这个问题,但当时没有记录,现在还 ...
- 下拉列表(web),用jQuery实现
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" conten ...
- PHP在ubuntu中编译安装
关于怎么获取php源码和解压就不再说了. 编译的参数为: ./configure --prefix=/opt/php --with-bz2 --with-mcrypt --with-mhash --w ...
- [Doc ID 1590988.1]如何清理E-Business Suite的缓存(Apache/iAS, Cabo, Modplsql, Browser, Jinitiator, Java, Portal, WebADI)?
文档内容 目标 解决方案 参考 适用于: Oracle Applications Technology Stack - 版本 11.5.9 到 12.2.2 [发行版 11.5 到 12. ...
- linux系统下搭建自己的web服务器
之前在windows 2008 server上搭建了一个用于测试的web服务器,但是在打开网站的时候特别的慢,尤其是图片的加载都会失败,当时以为是路径的问题,但是在服务器上自己打开都特别慢,自己实在找 ...