javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox


Posted in Javascript onAugust 05, 2008

// 版本: 1.0
// 日期: 2007/08/01
// 备注: 需要jQuery库
// 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables)

function Kin_Tables(
                    Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数
                    Kin_Table_Header_Offset, //从前起忽略多少行 可选参数
                    Kin_Table_Footer_Offset, //从后起忽略多少行 可选参数
                    Kin_Table_Odd_Style, //奇数行样式 可选参数
                    Kin_Table_Even_Style, //偶数行样式 可选参数
                    Kin_Table_Hover_Style, //鼠标悬停样式 可选参数
                    Kin_Table_Click_Style //鼠标点击样式 可选参数
                    ){

    $(function(){
        var Kin_Table_Config = [];
        Kin_Table_Config.GetTableMethod=(Kin_Table_GetTableMethod?Kin_Table_GetTableMethod:".Kin_Table");
        Kin_Table_Config.Header_Offset=(!isNaN(Kin_Table_Header_Offset)?Kin_Table_Header_Offset:0);
        Kin_Table_Config.Footer_Offset=(!isNaN(Kin_Table_Footer_Offset)?Kin_Table_Footer_Offset:0);
        Kin_Table_Config.Odd_Style=(Kin_Table_Odd_Style?Kin_Table_Odd_Style:"odd");
        Kin_Table_Config.Even_Style=(Kin_Table_Even_Style?Kin_Table_Even_Style:"even");
        Kin_Table_Config.Hover_Style=(Kin_Table_Hover_Style?Kin_Table_Hover_Style:"over");
        Kin_Table_Config.Click_Style=(Kin_Table_Click_Style?Kin_Table_Click_Style:"clicked");

        var Kin_Table = $(Kin_Table_Config.GetTableMethod+" tr:nth-child(n+"+eval(Kin_Table_Config.Header_Offset+1)+")");

        Kin_Table.each(function(i,row){
            if (i>=Kin_Table.length-Kin_Table_Config.Footer_Offset) return false;
            var Kin_Table_Row_Checkbox = $(row).find(":checkbox");
            bChecked = false;
            $(row).addClass(i%2==0?Kin_Table_Config.Odd_Style:Kin_Table_Config.Even_Style)
            $(row).hover(
                function(){$(this).addClass(Kin_Table_Config.Hover_Style);},
                function(){$(this).removeClass(Kin_Table_Config.Hover_Style);
            });
            $(row).click(function(){
                $(this).toggleClass(Kin_Table_Config.Click_Style);
                Kin_Table_Row_Checkbox.each(function(){
                    this.checked=$(row).hasClass(Kin_Table_Config.Click_Style);
                });
            });
            Kin_Table_Row_Checkbox.each(function(){
                if(this.checked){
                    bChecked = true;
                    return false;
                }
            });
            if (bChecked) {
                $(row).addClass(Kin_Table_Config.Click_Style);
                Kin_Table_Row_Checkbox.each(function(){
                    this.checked = true;
                });
            }else{
                $(row).removeClass(Kin_Table_Config.Click_Style);
            }
        });
    });
}

Javascript 相关文章推荐
jquery插件推荐 jquery.cookie
Nov 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
vue组件间通信解析
Mar 01 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
很可爱的输入框
Aug 03 #Javascript
javascript之更有效率的字符串替换
Aug 02 #Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 #Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 #Javascript
js控制框架刷新
Aug 01 #Javascript
javascript之可拖动的iframe效果代码
Aug 01 #Javascript
javascript 单选框,多选框美化代码
Aug 01 #Javascript
You might like
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php微信开发之百度天气预报
2016/11/18 PHP
轻松实现php文件上传功能
2017/02/17 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
python字符串替换示例
2014/04/24 Python
python字符串与url编码的转换实例
2018/05/10 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python如何快速拼接字符串
2020/10/28 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
个人整改措施书面材料
2014/10/24 职场文书
支行行长岗位职责
2015/02/15 职场文书