<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. hdu 5150(水题)

    Sum Sum Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. hdu 5108(数论-整数分解)

    Alexandra and Prime Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  3. 设置电脑(windows)自动关机的方法

    下面有三种设置方法可以自动关机. 设置一 定时自动关机 假如你需要电脑在20:20自动关机,那么只需要在“开始”菜单中选择“运行”,然后输入at 20:20 Shutdown -s,点击“确定”即可. ...

  4. 2018年最重要的HTML5开发手册,传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的web前端/HTML5/javscript技术学习群: ...

  5. git提交代码出现错误fatal: Unable to create '项目路径/.git/index.lock': File exists.

    git提交代码出现错误fatal: Unable to create '项目路径/.git/index.lock': File exists. 具体出错代码如下: 具体原因不详,在stackoverf ...

  6. UVA 1025 A Spy in the Metro 【DAG上DP/逆推/三维标记数组+二维状态数组】

    Secret agent Maria was sent to Algorithms City to carry out an especially dangerous mission. After s ...

  7. Wannafly挑战赛22 A-计数器(gcd,裴蜀定理)

    原题地址 题目描述 有一个计数器,计数器的初始值为0,每次操作你可以把计数器的值加上a1,a2,...,an中的任意一个整数,操作次数不限(可以为0次),问计数器的值对m取模后有几种可能. 输入描述: ...

  8. 使用GEANT4的模拟技术1

    简介 本文来源于意大利国家核物理研究院INFN的08年的slides.原文名称simulation techniques using geant4,原文主要讲述的是开发geant4用户程序的方法.这里 ...

  9. 解密Java内存溢出之持久代

    垃圾回收是Java程序员了解最少的一部分.他们认为Java虚拟机接管了垃圾回收,因此没必要去担心内存的申请,分配等问题.但是随着应用越来越复杂,垃圾回收也越来越复杂,一旦垃圾回收变的复杂,应用的性能将 ...

  10. luogu P1361 小M的作物

    题目链接 luogu P1361 小M的作物 题解 源汇点为A,B 向种子连边,容量为价值,每个种子能与A或B联通,考虑最小割 用建边的总流量减去最小割就是答案 相同利益的时候新建节点,由额外利益构成 ...