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 parentElement和offsetParent之间的区别
Mar 23 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
学生保证书格式
2015/02/27 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
学校运动会加油词
2015/07/18 职场文书
运动会新闻报道稿
2015/07/22 职场文书
事业单位岗位说明书
2015/10/08 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
创业计划书之面包店
2019/09/12 职场文书
八年级作文之感恩
2019/11/22 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js