- 浏览: 2261565 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (423)
- FileNet相关 (3)
- 应用服务器相关 (22)
- Java综合 (77)
- 持久层 (24)
- struts (11)
- webservice (8)
- 虚拟机 (2)
- 光盘刻录 (0)
- AD及AD集群 (1)
- JS (33)
- F5 (0)
- loadrunner8.1 (0)
- Java 反编译工具 (2)
- DataBase (62)
- ant (1)
- 操作系统 (29)
- 我的任务 (3)
- 平台架构 (16)
- 业务规则引擎 (2)
- 模板 (1)
- EJB (5)
- spring (24)
- CMMI (1)
- 项目管理 (20)
- LDAP (13)
- JMS (10)
- JSP (19)
- JBPM (2)
- web MVC框架设计思想 (2)
- 第三方支付平台 (2)
- BUG管理工具 (1)
- 垃圾站 (2)
- php (1)
- swing (1)
- 书籍 (1)
- QQ qq (2)
- 移动互联网 (26)
- 爱听的歌曲 (0)
- hadoop (4)
- 数据库 (9)
- 设计模式 (1)
- 面试经验只谈 (1)
- 大数据 (9)
- sp (1)
- 缓存数据库 (8)
- storm (2)
- taobao (2)
- 分布式,高并发,大型互联网,负载均衡 (6)
- Apache Ignite (0)
- Docker & K8S (0)
最新评论
-
wangyudong:
新版本 Wisdom RESTClienthttps://gi ...
spring rest mvc使用RestTemplate调用 -
wangyudong:
很多API doc生成工具生成API文档需要引入第三方依赖,重 ...
spring rest mvc使用RestTemplate调用 -
zhaoshijie:
cfying 写道大侠,还是加载了两次,怎么解决啊?求。QQ: ...
spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) -
xinglianxlxl:
对我有用,非常感谢
spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) -
k_caesar:
多谢,学习了
利用maven的resources、filter和profile实现不同环境使用不同配置文件
jquery.altertrstyle.js API:
alterTrStyle(options)
设置表格隔行显示和选中行样式效果,并且增加checkbox和radio选中效果。
返回值:jQuery
参数:
options(Map):(可选)设置隔行显示和选中效果的css类集,格式为 {odd:"css类名", even:"css类名", selected:"css类名"}, Map建名必须为odd、even、selected,如果此参数未给定则css样式表中的css类名必须为odd、even、selected才能达到效果。
---
源码:
Js代码
;(function($){
$.fn.extend({
"alterTrStyle":function(options){
//设置默认值
options=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);
var oddTr;
var evenTr;
var Tr;
var initSelectedTr;
if($("tbody").length>0){
oddTr = $("tbody>tr:odd",this);
evenTr = $("tbody>tr:even",this);
Tr = $("tbody>tr",this);
initSelectedTr = $("tbody>tr:has(:checked)",this);
}else{
oddTr = $("tr:odd",this);
evenTr = $("tr:even",this);
Tr = $("tr",this);
initSelectedTr = $("tr:has(:checked)",this);
}
//设置隔行变色
oddTr.addClass(options.odd);
evenTr.addClass(options.even);
//选中变色
Tr.click(function(){
//判断当前是否被选中
var hasSelected = $(this).hasClass(options.selected);
if($(this).find(':checkbox').length>0){
//如果选中,则移除selected类,否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(':checkbox').attr('checked',!hasSelected);
return;
}
if($(this).find(':radio').length>0){
$(this).addClass(options.selected)
.find(':radio').attr('checked',true).end()
.siblings(':has(:radio)').removeClass(options.selected)
.find(':radio').attr('checked',false);
return;
}
$(this)[hasSelected?"removeClass":"addClass"](options.selected);
});
//如果单选框默认是选中的,则高亮
initSelectedTr.addClass(options.selected);
return this;
}
});
})(jQuery);
alterTrStyle(options)
设置表格隔行显示和选中行样式效果,并且增加checkbox和radio选中效果。
返回值:jQuery
参数:
options(Map):(可选)设置隔行显示和选中效果的css类集,格式为 {odd:"css类名", even:"css类名", selected:"css类名"}, Map建名必须为odd、even、selected,如果此参数未给定则css样式表中的css类名必须为odd、even、selected才能达到效果。
---
源码:
Js代码
;(function($){
$.fn.extend({
"alterTrStyle":function(options){
//设置默认值
options=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);
var oddTr;
var evenTr;
var Tr;
var initSelectedTr;
if($("tbody").length>0){
oddTr = $("tbody>tr:odd",this);
evenTr = $("tbody>tr:even",this);
Tr = $("tbody>tr",this);
initSelectedTr = $("tbody>tr:has(:checked)",this);
}else{
oddTr = $("tr:odd",this);
evenTr = $("tr:even",this);
Tr = $("tr",this);
initSelectedTr = $("tr:has(:checked)",this);
}
//设置隔行变色
oddTr.addClass(options.odd);
evenTr.addClass(options.even);
//选中变色
Tr.click(function(){
//判断当前是否被选中
var hasSelected = $(this).hasClass(options.selected);
if($(this).find(':checkbox').length>0){
//如果选中,则移除selected类,否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(':checkbox').attr('checked',!hasSelected);
return;
}
if($(this).find(':radio').length>0){
$(this).addClass(options.selected)
.find(':radio').attr('checked',true).end()
.siblings(':has(:radio)').removeClass(options.selected)
.find(':radio').attr('checked',false);
return;
}
$(this)[hasSelected?"removeClass":"addClass"](options.selected);
});
//如果单选框默认是选中的,则高亮
initSelectedTr.addClass(options.selected);
return this;
}
});
})(jQuery);
- 设置表格行样式和选中行样式.rar (35.6 KB)
- 下载次数: 15
发表评论
-
正则表达式匹配聊天中所有url连接地址-高亮显示
2017-06-07 18:48 1436关键字:正则表达式匹配聊天中所有url连接地址-高亮显示 需 ... -
各大巨头电商提供的IP库API接口-新浪、搜狐、阿里...
2015-04-22 13:18 15909关键字:各大巨头电商提供的IP库API接口-新浪、搜狐、阿里. ... -
treeTable
2015-03-25 00:36 764jqgrid中文官网:http://blog.mn886.ne ... -
我的定时器
2014-01-12 19:24 799关键字:我的定时器 说明:请不要试图下载使用,此附件没有任 ... -
Highcharts漂亮大气的图表(纯JS)
2013-12-14 12:09 5978关键字:Highcharts漂亮大气的图表(纯JS) ... -
智能搜索提示功能
2013-11-23 20:12 1235关键字:智能搜索提示功能 推荐一:http://site518 ... -
jQuery 工具提示插件 PoshyTip
2013-08-03 00:48 36039关键字:jQuery 工具提示插件 PoshyTip 在 ... -
js打开浏览器文件下载框
2013-07-15 13:49 21092关键字:js打开浏览器文件下载框 说明:此方法兼容IE、火 ... -
常有前端验证JS
2013-02-03 15:12 1771关键字:常有前端验证JS 附件是前端界面常用验证工具 ... -
jquery操作iframe中的js函数
2013-01-06 10:39 13037关键字:jquery操作iframe中的js函数 1 ... -
网页特效、各功能大全
2012-12-06 12:34 920关键字:网页特效、各功能大全 http://www.c ... -
js前端MD5加密
2012-08-13 10:30 2556关键字:js前端MD5加密 大家好:附件是js使用md5算 ... -
js操作cookie(增删改查)
2012-08-09 10:50 2049关键字:js操作cookie(增删改查) 附件是js操作c ... -
jQuery监听事件经典例子
2011-10-17 00:27 3089关键字:jQuery监听事件经典例子 js代码: === ... -
ajax jQuery 实现文件上传
2011-09-21 22:33 16921.上传jsp。 <table cellpadd ... -
jQuery ajax libs
2011-08-31 10:34 855附件是 jQuery ajax 相关jar包。 -
IE中调试JS的一款很好的工具
2011-05-02 18:52 1229附件是 IE中调试JS的一款很好用的工具,欢迎下载使用。 ... -
JS日历控件
2011-03-07 14:09 1371附件是现成的JS日历控件,使用起来相当简单,有例子去看看吧,喜 ... -
页面提示
2011-01-26 13:30 931附件是:页面提示相关例子,请下载使用。。 -
无限极菜单之全自动化配置平台(待优化中..请等待消息)
2011-01-10 21:43 1094关键字:无限极菜单之全自动化配置平台 使用方法: 应用服务器 ...
相关推荐
2. **表格隔行换色效果**:也称为交错行颜色或Zebra Striping,这是一种常见的优化可读性的设计技巧。通过在交替的行中使用不同的背景色,可以更轻松地引导用户的眼睛跟踪行间的差异,尤其是当数据量较大时。实现这...
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...
在网页设计中,为了提升用户体验和视觉效果,经常会使用到jQuery技术来实现一些动态功能,如隔行换色、鼠标经过样式变化以及标题提示效果。这些功能可以使网页更具交互性,增强用户对信息的感知。 首先,让我们了解...
在本文中,我们将讨论如何利用 Bootstrap 实现表格隔行变色、hover 变色以及在需要时显示滚动条的效果。 首先,为了实现这些功能,我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文档的 `<head>` ...
可以使用 `nth-child(odd)` 和 `nth-child(even)` 选择器来选中表格的奇数行和偶数行,并分别设置不同的背景颜色。例如: ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { ...
3. **CSS样式**:编写`.mouseover`类来设置悬停时的样式,如背景色和文字颜色。 ### HTML/CSS布局 表格插件还需要遵循良好的HTML结构和CSS样式规范,这些内容包括: 1. **HTML结构**:合理的表格结构,如`thead`,...
*插件名:表格(table)优化器 *功能对照表: * 名称 参数 参数描叙 方法描叙 类型 ====>数据加载 * loadData dataSource, 数据源 数据加载JSON或者Array 功能 isTh 是否包含TH文件头 ====>数据...
隔行换色是一种常见的表格美化技术,通过改变奇偶行的背景色,使得表格内容更易读,提高用户体验。在给出的代码中,CSS 类`.datagrid` 和相关的样式定义了表格的基本样式。`.datagrid tr` 是表格行的基础样式,`....
这里我们关注的是几个与jQuery特效相关的资源,包括菜单、表格样式和树形列表等。以下是对这些特效的详细介绍: 1. **jQuery基础教程 - hover用法**: 这个文件涉及jQuery中的`hover`方法,它允许我们在鼠标进入和...
- 在表格上方插入一行作为标题行,选中该行后设置为“标题行重复”。 **25. 快速打印WordXP的快捷键列表** - 使用“文件”>“打印”命令,在打印对话框中选择“快捷键列表”作为打印内容。 **26. 公式的颜色也能...
- 选中表头行,使用“表格工具”下的“设计”选项卡中的“重复标题行”功能。 **38. 在Word中巧划线** - 使用“插入”选项卡下的“形状”功能绘制直线或曲线。 - 也可以使用“边框”功能添加线条。 **39. 打造...
使用冻结窗格功能(`Ctrl+F8`),可以固定显示表格的第一行或前几行。 38. **在Word中巧划线** 使用“绘图”工具中的“直线”工具绘制直线。 39. **打造Word右键菜单** 通过“文件”>“选项”>“高级”中的...
- 选中需要隔行删除的文本,使用查找与替换功能,将查找内容设置为“^p^p”(其中^p代表回车符),替换为空即可实现隔行删除。 **4. 清除Word文档中多余的空行** - 同样利用查找与替换功能,查找内容设置为“^p{2,}...
- 选择表格的第一行,然后在“布局”选项卡下的“数据”组中选择“冻结标题行”功能。 **25. 快速打印 Word XP 的快捷键列表** - 使用 `Alt + Ctrl + P` 快速调出打印对话框。 **26. 公式的颜色也能变** - 选中...
- 选择表格标题行,然后在“布局”选项卡中选择“冻结标题”功能。 **25. 快速打印WordXP的快捷键列表** - 在Word中,可以通过“文件”>“选项”>“自定义功能区”找到快捷键列表,并将其打印出来。 **26. 公式的...