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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 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 全文搜索和替换的实现代码
2008/07/29 PHP
PHP异常处理Exception类
2015/12/11 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
平面设计师的工作职责
2013/11/21 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
考核工作实施方案
2014/03/30 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
高中同学会活动方案
2014/08/14 职场文书
质检员岗位职责
2015/02/03 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技