隔行换色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 ...
随机推荐
- Java遍历list集合的4种方法
list集合的遍历4种方法: package com.sort; import java.util.ArrayList; import java.util.Iterator; import java. ...
- 【linux高级程序设计】(第十一章)System V进程间通信 3
信号量通信机制 可以看到,跟消息队列类似,也是包括两个结构. int semget (key_t __key, int __nsems, int __semflg) : 创建信号量集合 第一个参数:f ...
- poj 1151(离散化+矩形面积并)
题目链接:http://poj.org/problem?id=1151 关于离散化,这篇博客讲的很好:http://www.cppblog.com/MiYu/archive/2010/10/15/12 ...
- PSR-1 基础编码规范
本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MUST NOT& ...
- AC日记——Valued Keys codeforces 801B
801B - Valued Keys 思路: 水题... 来,上代码: #include <cstdio> #include <cstring> #include <io ...
- Netty源码学习(四)Netty服务器是如何启动的?
本文会分析Netty服务器的启动过程,采用的范例代码是Netty编写的Echo Server. 0. 声明acceptor与worker 由于Netty采用的reactor模型,所以需要声明两组线程, ...
- 牛客网 暑期ACM多校训练营(第二场)D.money-贪心 or 动态规划
D.money 贪心,直接贴官方的题解吧. 题目大意 你要按照顺序依次经过n个商店,每到达一个商店你可以购买一件商品,也可以出售你手中的商品. 同一时刻你手上最多拿一件商品.在第i个商店购买和出售的代 ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
- Palindrome Permutation -- LeetCode
Given a string, determine if a permutation of the string could form a palindrome. For example," ...
- Find intersection of two sorted arrays
共有三种思路. 哈希表. 将较小的那个数组中的所有元素存在哈希表中.然后依次验证另一个数组中的数字是否有出现过.时间复杂度O(m + n),空间复杂度O(min(m, n)) 二分搜索法 将较小的那个 ...