非常简单,只需要在页面中增加:

样式:

.odd{
    background-color: #9F9;
}
.even{
    background-color: #FFC;
}

th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

tr.over td{
    background-color: #3FF;
} /*这个将是鼠标高亮行的背景色*/

然后引入js定义即可:

$(document).ready(function()
{
    //标题显示
    //在jQuery1.3.1中有问题,下面的奇偶设定会覆盖,使用1.3.1a则没有问题

$('th').parent().addClass('tablehead');
    //奇偶交替颜色显示
    $('tr:not([th]):odd').addClass('odd');
    $('tr:not([th]):even').addClass('even');
    //着重显示
    $('td:contains("001")').addClass('highlight');

//鼠标
    $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
     $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
     $(this).removeClass("over");}) //移除该行的class

});

页面中的表格不需要任何特殊设置!

//在其他版本中,不使用下面这行,而是直接定义CSS:

th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

然后:

$(document).ready(function()
{
    //标题显示
    //奇偶交替颜色显示
    $('tr:not([th]):odd').addClass('odd');
    $('tr:not([th]):even').addClass('even');
    //着重显示
    $('td:contains("001")').addClass('highlight');

//鼠标
    $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
     $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
     $(this).removeClass("over");}) //移除该行的class

});

转载于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/08/1498640.html

jQuery中将表格以交替颜色显示相关推荐

  1. JQuery 操作表格和JqGrid了解

    登录 | 注册 mike_caoyong的专栏 目录视图 摘要视图 订阅 CSDN日报20170322--<关于软件研发的一些体会总结>    同步博客至 CSDN ,让更多开发者看到你的 ...

  2. jquery计算表格列,求和

    jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...

  3. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

  4. 我的jQuery动态表格插件二

    本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...

  5. jquery实现表格的多行删除

    初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquery类 ...

  6. 手机端html表格,jQuery Mobile 表格

    jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...

  7. jQuery实现表格隔行换颜色:

    jQuery实现表格各行换颜色: 截图如下: 代码如下: <span style="font-family:Microsoft YaHei;font-size:14px;"& ...

  8. jQuery实现表格行上移下移和置顶

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  9. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...

  10. jQuery: 合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

最新文章

  1. php 图片 cdn,PHP文件生成的图片无法使用CDN缓存的解决方法
  2. 四十五、和我一起看看,国外的Python考试到底是怎么样(上篇)
  3. QML基础类型之font
  4. drf4 视图与路由组件
  5. 数据挖掘竞赛-员工离职预测训练赛
  6. mes建设指南_给予和接受建设性批评的设计师指南
  7. CF446D-DZY Loves Games【高斯消元,矩阵乘法】
  8. 解决 MyEclipse build workspace 慢,validation javascript 更慢的问题
  9. 【牛客 - 297C】little w and Segment Coverage(差分数组,区间差分,思维,卡线段树)☆
  10. 【 CodeForces - 799A 】Carrot Cakes(模拟,细节,有坑)
  11. raw socket java_记一次蛋疼的Raw socket发送经历。附:Raw socket编程总结
  12. Java---SSH(MVC)面试
  13. php旅游管理系统,基于Laravel框架开发的旅游网站管理系统PHP源码
  14. linux语言vim的下载,Vim 从入门到精通 PDF
  15. Android屏幕适配全攻略(最权威的官方适配指导)
  16. Hexo搭建个人博客(十五)| 酒香也怕巷子深,让百度收录你的站点
  17. 弘辽科技:如何分析买家秀是否优质?如何优化评价、买家秀?
  18. ftp服务器软件和ftp客户端软件的使用说明
  19. House Carpenter
  20. RAC(ReactiveCocoa)之 RAC宏定义

热门文章

  1. Eclipse下PHP开发 插件安装
  2. C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(五十) 终章!新的曙光!...
  3. 开源之旅——应用服务器篇
  4. android 出现在默认应用程序,如何将我的应用程序设置为默认的SMS应用程序?
  5. 摄像机跟随与视野调整
  6. nginx master-worker进程间通信
  7. idea中resources下的logback-spring的配置
  8. 【渝粤教育】国家开放大学2018年秋季 0222-21T模拟电子电路 参考试题
  9. [渝粤教育] 西南科技大学 供用电网络及变电所设备 在线考试复习资料
  10. 一个程序段两个小问题