隔行换色table
<style type="text/css">
table
{
margin: 0 auto;
width: 600px;
}
table
{
border: 1px solid #000;
}
table tr th
{
height: 28px;
line-height: 28px;
background: #999;
}
table.stripe tr td
{
height: 28px;
line-height: 28px;
text-align: center;
background: #FFF;
vertical-align: middle;
}
/* 默认背景被白色 */
table.stripe tr.alt td
{
background: #F2F2F2;
}
/* 默认隔行背景颜色 */
table.stripe tr.over td
{
background: #EEECEB;
}
/* 鼠标经过时候背景颜色 */
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".stripe tr").mouseover(function () {
$(this).addClass("over");
}).mouseout(function () {
$(this).removeClass("over");
})
$(".stripe tr:even").addClass("alt");
});
</script>
<table id="table" class="stripe">
<tr>
<td>
活动主题
</td>
<td>
获得
</td>
</tr>
<tr>
<td>
活动主题
</td>
<td>
</td>
</tr>
<tr>
<td>
活动主题
</td>
<td>
</td>
</tr>
</table>
隔行换色table的更多相关文章
- table隔行换色
以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
- 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 ...
随机推荐
- 2.OpenStack-安装消息队列服务
安装消息队列服务(安装在控制器上) yum install rabbitmq-server -y systemctl start mariadb.service 配置消息队列服务 systemctl ...
- ppt提取图片,视频文件
1,将视频另存为htm格式,然后会生成文件夹,里面就有. 2,如果没法生成htm格式,可以生成odp格式,压缩文件,用解压缩软件查看odp文件,就能看到. 3,pptx直接修改后缀为rar或者zip, ...
- J.U.C并发框架源码阅读(八)ArrayBlockingQueue
基于版本jdk1.7.0_80 java.util.concurrent.ArrayBlockingQueue 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. U ...
- 链式前向星BFS
本文链接:http://i.cnblogs.com/EditPosts.aspx?postid=5399068 采用链式前向星的BFS: #include <iostream> #incl ...
- 树的直径【bzoj3363】 [Usaco2004 Feb]Cow Marathon 奶牛马拉松
Description 最近美国过度肥胖非常普遍,农夫约翰为了让他的奶牛多做运动,举办了奶牛马拉松.马拉松路线要尽量长,所以,告诉你农场的地图(该地图的描述与上题一致),请帮助约翰寻找两个最远农场间的 ...
- stack栈和Queue队列
1.push将对象插入 System.Collections.Generic.Stack<T> 的顶部. Stack st = new Stack(); //栈是先进后出 st.Push( ...
- java File和Byte[]数组 相互转换
public class Test { public static void main(String[] args){ String filePath = "E:\\softoon\\wor ...
- thinkphp3.0增加setInc、setDec方法
thinkphp3.0增加setInc.setDec方法 thinkphp3.0增加setInc.setDec方法,今天查看thinkphp2.0的方法setInc.setDec时是这样写的: 而对于 ...
- Python学习笔记——对象
Python 的对象定义方式如下: class Person: def __init__(self, name): self.name = name ...
- 【SQL】用Sql Server自动生产html格式的数据字典
原文:[SQL]用Sql Server自动生产html格式的数据字典 本文软件环境:Sql Server 2008. 1.打开sql server管理器,给选定的表添加描述信息,给指定的字段添加描述信 ...