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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Vue实现push数组并删除的例子
Nov 01 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的基本常识小结
2013/07/05 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python3实现转换Image图片格式
2018/06/21 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
求职自荐信范文格式
2013/11/29 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年标准化工作总结
2014/12/17 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript