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 相关文章推荐
图片之间的切换
Jun 26 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
如何提高javascript加载速度
Dec 26 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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简单生成一组与多组随机字符串的方法
2017/05/09 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
keras K.function获取某层的输出操作
2020/06/29 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
文明青少年标兵事迹材料
2014/01/28 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
副总经理岗位职责
2015/02/02 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书