javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
作者:手机用户2502898521 | 来源:互联网 | 2022-07-06 16:18
jQuery的表格悬停变色恢复,表格点击变色恢复,点击行选Checkbox
// 版本: 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_odd");
Kin_Table_Config.Even_even");
Kin_Table_Config.Hover_over");
Kin_Table_Config.Click_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);
}
});
});
}
推荐阅读
-
本文介绍了如何使用jQuery获取浏览器窗口的可视区域高度、文档的整体高度以及宽度等关键尺寸信息,包括边界、填充和边距在内的完整尺寸。 ...
[详细]
蜡笔小新 2024-11-24 12:57:23
-
我在尝试将组合框转换为具有自动完成功能时遇到了一个问题,即页面上的列表框也被转换成了自动完成下拉框,而不是保持原有的多选列表框形式。 ...
[详细]
蜡笔小新 2024-11-24 12:02:48
-
-
本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ...
[详细]
蜡笔小新 2024-11-21 19:38:53
-
本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ...
[详细]
蜡笔小新 2024-11-21 18:16:19
-
本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ...
[详细]
蜡笔小新 2024-11-21 17:10:15
-
publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ...
[详细]
蜡笔小新 2024-11-21 16:25:41
-
本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ...
[详细]
蜡笔小新 2024-11-21 14:24:21
-
阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ...
[详细]
蜡笔小新 2024-11-20 20:05:37
-
本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ...
[详细]
蜡笔小新 2024-11-20 17:21:26
-
Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ...
[详细]
蜡笔小新 2024-11-20 11:50:55
-
2019独角兽企业重金招聘Python工程师标准$(#checkAllSelectedOrganization).live(click,function(){$(in ...
[详细]
蜡笔小新 2024-11-20 10:45:07
-
本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ...
[详细]
蜡笔小新 2024-11-20 09:46:39
-
本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ...
[详细]
蜡笔小新 2024-11-19 17:19:15
-
本文将详细介绍如何利用JavaScript实现一个动态的Tab栏切换效果。通过具体的代码示例,帮助读者理解并掌握这一前端技术的应用。 ...
[详细]
蜡笔小新 2024-11-19 14:29:28
-
本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ...
[详细]
蜡笔小新 2024-11-19 12:43:15
-
手机用户2502898521
这个家伙很懒,什么也没留下!