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 相关文章推荐
JS判断变量是否为空判断是否null
Jul 25 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
vue路由教程之静态路由
Sep 03 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue+Element-ui实现登录注册表单
Nov 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中使用socket方式GET、POST数据实例
2015/04/02 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
几种响应式文字详解
2017/05/19 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
新手常见6种的python报错及解决方法
2018/03/09 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
浅析NumPy 切片和索引
2020/09/02 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
学校捐款活动总结
2015/05/09 职场文书
文化大革命观后感
2015/06/17 职场文书
如何写观后感
2015/06/19 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS