<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. 多个类的DLL封装及调用

    #define FaceLIBDLL #include "stdafx.h" #include "facedll.h" #include <opencv2 ...

  2. 关于多态的理解,有助于理解TStream抽象类的多态机制。

    有的时候 不是很明白流的机制,因为有内存流  文件流 图片流 等等 他们之间的相互转化 靠的就是流的多态性.... unit Unit11; interface uses Winapi.Windows ...

  3. shell 练习 (免密钥登陆脚本)

    脚本说明 本地服务器ip 10.0.0.5 远程服务器地址 10.0.0.223 #!/bin/bashremote_ip=$ if [ ! -n "$1" ] ;then ech ...

  4. hdu 5159(概率)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5159 题解:假设在 x 张牌中选b张牌,那么有 x^b 种选法,如果在 (x-1) 张牌中选 b 张 ...

  5. ORA-01940: cannot drop a user that is currently connected

    https://www.cnblogs.com/lwlxqlccc/p/8694696.html

  6. 使用Android Studio开发调用.NET Webservice 之初体验

    本人是.NET出身 但苦于领导要让研究Android 外壳然后准备套html5  ,当试验兵真坑啊 但也没办法 咱还得研究啊,索性 不辜负领导的期望(也研究好两三天了)总算弄明白了 app本地存储 和 ...

  7. ubuntu 安装TensorFlow

    1.安装pip $ sudo apt-get install python-pip python-dev 2.安装 TensorFlow for Python 2.7 # Ubuntu/Linux - ...

  8. LINUX学习资源

    鸟哥:http://vbird.dic.ksu.edu.tw/linux_basic/0430cron.php#cron 五分钟教程:http://roclinux.cn/?page_id=3759

  9. Tomcat服务器与HTTP协议

    Tomcat服务器与HTTP协议 一.  Tomcat服务器 1.tomcat服务器 1.web :网页,它代表的是网络上的资源.(java技术开发动态的web资源,即动态web页面,在Java中,动 ...

  10. Python的功能模块[1] -> struct -> struct 在网络编程中的使用

    struct模块 / struct Module 在网络编程中,利用 socket 进行通信时,常常会用到 struct 模块,在网络通信中,大多数传递的数据以二进制流(binary data)存在. ...