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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
vue如何判断dom的class
Apr 26 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Vue3为什么这么快
Sep 23 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/01/07 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php获取excel文件数据
2017/04/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
使用python编写udp协议的ping程序方法
2018/04/22 Python
python 实现登录网页的操作方法
2018/05/11 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
对python Tkinter Text的用法详解
2018/10/11 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
如何编写python的daemon程序
2021/01/07 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
五一劳动节活动总结
2015/02/09 职场文书
审美与表现自我评价
2015/03/09 职场文书
个人求职意向书
2015/05/11 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书