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 相关文章推荐
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
js实现动态显示时间效果
Mar 06 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
node后端服务保活的实现
Nov 10 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
destoon设置自定义搜索的方法
2014/06/21 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
低碳环保标语
2014/06/12 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
开发房地产协议书
2014/09/14 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2016春季运动会前导词
2015/11/25 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python