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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
基于Node.js的大文件分片上传示例
Jun 19 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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python中文件操作简明介绍
2015/04/13 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
django正续或者倒序查库实例
2020/05/19 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
大学生村官典型材料
2014/01/12 职场文书
求职信结尾怎么写
2014/05/26 职场文书
人事任命书格式
2014/06/05 职场文书
感谢信的格式
2015/01/21 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
浅谈Python魔法方法
2021/06/28 Java/Android