<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的更多相关文章

  1. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  2. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  4. php29号小结(隔行换色······)

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

  5. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  6. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  9. JS应用实例4:表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

随机推荐

  1. BootStrap容器介绍

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. 你不知道的 JavaScript 基础细节

    语法部分 type 属性: 默认的 type 就是 javascript, 所以不必显式指定 type 为 javascript javascript 不强制在每个语句结尾加 “:” , javasc ...

  3. J.U.C并发框架源码阅读(十五)CopyOnWriteArrayList

    基于版本jdk1.7.0_80 java.util.concurrent.CopyOnWriteArrayList 代码如下 /* * Copyright (c) 2003, 2011, Oracle ...

  4. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  5. poj1185(状态压缩DP)

    poj1185 题意 给出字母矩阵,只能在字母为 P 的位置放置大炮, 如图所示,每个大炮的射程固定,现在要求尽可能多的放大炮,且使得每个大炮都不在其它大炮的射程内.问最多能放多少. 分析 poj32 ...

  6. vue编程中,需要注意的

    同名情况: data() 中的数据名   和  methods()  中的方法名  不能相同. 原因:因为在vue中这两个都能用this.XX拿出来,如果写一样的,将不能分辨,计算机会默认覆盖一个. ...

  7. Guess Number Higher or Lower II -- LeetCode

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  8. H-Index II -- LeetCode

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  9. 设计模式之策略模式(php实现)

    github地址:https://github.com/ZQCard/design_pattern /** * 在策略模式(Strategy Pattern)中,一个类的行为或其算法可以在运行时更改. ...

  10. remeber me即记住我功能

    1.登录过程中的记住我功能如图: 2.这样在登录认证的时候,客户端会传递两个cookie:remember_token和Tsession 3.即使客户端不传递cookie中的Tsession,只传递r ...