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与css打造个性化的单选框和复选框
Oct 20 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php中namespace及use用法分析
2016/12/06 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
通过源码分析Python中的切片赋值
2017/05/08 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
详解Python3中的 input() 函数
2020/03/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
初中美术教学反思
2016/02/17 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书