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 27 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
很可爱的输入框
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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php文件上传类的分享
2017/07/06 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
python中split方法用法分析
2015/04/17 Python
Python base64编码解码实例
2015/06/21 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
python实现简单文件读写函数
2021/02/25 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
我读书我快乐演讲稿
2014/05/07 职场文书
本科毕业生求职信
2014/06/15 职场文书
教师求职自荐信
2015/03/26 职场文书
如何写辞职信
2015/05/13 职场文书
关于五一放假的通知
2015/08/18 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书