jQuery中将表格以交替颜色显示
非常简单,只需要在页面中增加:
样式:
.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中将表格以交替颜色显示相关推荐
- JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏 目录视图 摘要视图 订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
- jquery计算表格列,求和
jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- jquery实现表格的多行删除
初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquery类 ...
- 手机端html表格,jQuery Mobile 表格
jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...
- jQuery实现表格隔行换颜色:
jQuery实现表格各行换颜色: 截图如下: 代码如下: <span style="font-family:Microsoft YaHei;font-size:14px;"& ...
- jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...
- jQuery: 合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
最新文章
- php 图片 cdn,PHP文件生成的图片无法使用CDN缓存的解决方法
- 四十五、和我一起看看,国外的Python考试到底是怎么样(上篇)
- QML基础类型之font
- drf4 视图与路由组件
- 数据挖掘竞赛-员工离职预测训练赛
- mes建设指南_给予和接受建设性批评的设计师指南
- CF446D-DZY Loves Games【高斯消元,矩阵乘法】
- 解决 MyEclipse build workspace 慢,validation javascript 更慢的问题
- 【牛客 - 297C】little w and Segment Coverage(差分数组,区间差分,思维,卡线段树)☆
- 【 CodeForces - 799A 】Carrot Cakes(模拟,细节,有坑)
- raw socket java_记一次蛋疼的Raw socket发送经历。附:Raw socket编程总结
- Java---SSH(MVC)面试
- php旅游管理系统,基于Laravel框架开发的旅游网站管理系统PHP源码
- linux语言vim的下载,Vim 从入门到精通 PDF
- Android屏幕适配全攻略(最权威的官方适配指导)
- Hexo搭建个人博客(十五)| 酒香也怕巷子深,让百度收录你的站点
- 弘辽科技:如何分析买家秀是否优质?如何优化评价、买家秀?
- ftp服务器软件和ftp客户端软件的使用说明
- House Carpenter
- RAC(ReactiveCocoa)之 RAC宏定义
热门文章
- Eclipse下PHP开发 插件安装
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(五十) 终章!新的曙光!...
- 开源之旅——应用服务器篇
- android 出现在默认应用程序,如何将我的应用程序设置为默认的SMS应用程序?
- 摄像机跟随与视野调整
- nginx master-worker进程间通信
- idea中resources下的logback-spring的配置
- 【渝粤教育】国家开放大学2018年秋季 0222-21T模拟电子电路 参考试题
- [渝粤教育] 西南科技大学 供用电网络及变电所设备 在线考试复习资料
- 一个程序段两个小问题