checkbox全选、table的相关jquey插件设计

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量307 收藏
点赞数
分类专栏： jquery/js 文章标签： 插件 checkbox jquery插件 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013971970/article/details/21558243
版权

先说想做的效果和思路

1.效果。

第一，全选按钮，选择后，所有checkbox的行全选。取消时候，所有checkbox全部取消。其实就是全选和全不选。

第二，隔行变色，

第三，鼠标滑动变色。


2.思路。

第一，其实全选和全不选，都是一个思路，click按钮，遍历所有的checkbox，将checked的值改为false或者ture，有的时候是checked

第二，隔行变色，用的是jquery中的tr:even，这个可是一个神奇啊。不解释。

第三，滑动变色，加深效果。bind的事件为mouseover和mouseout，用过这两个事件来改变效果。


之前我说过开发jquery插件的框架。

命名，起一个牛逼的名字。jquery.tableSelectPlugin.js，注意，jquery的插件就是要这样命名的。jquery.pluginname.js的形式。

html，这个是为table设计的，我们随便写一个table

	<table>
		<tr>
			<th><label><input id="allSel" type="checkbox" name="all"/>全选</label></th>
			<th>名称</th>
			<th>详情页</th>
			<th>编辑宝贝</th>
			<th>状态</th>
			<th>预览</th>
			<th>创建时间</th>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item" /></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item" /></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
	</table>

你要控制每一个tr，那么他必须有相同的元素，ok其实就是class=item

这是我们遍历的条件。

为了好看点，我加一段简单的css

<style>
table { font-size:12px; border:1px solid #dedede; margin:0 auto; }
table tr td { border: 1px solid #B1CDE3; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }
table tr .title { text-align:left; }
</style>

ok，现在我们来搭建jquery的框架

之前我已经讲过了。

直接贴框架的代码

(function($){
	jQuery.fn.tableSelectPlugin = function(options){
		var defaults = {
			id_all: "selAll",
			cls_item: "item",
		}
		var options = $.extend(defaults,options);
		return this.each(function(){
			//code....逻辑过程
		})
	}
})(jQuery);

defaults是默认的。我们观察我们需要控制的ducoment。id_all就是那个全选框的id，cls_item就是相同的tr的class

下面我们来写逻辑过程。

(function($){
	jQuery.fn.tableSelectPlugin = function(options){
		var defaults = {
			id_all: "selAll",
			cls_item: "item",
		}
		var options = $.extend(defaults,options);
		return this.each(function(){
			var o = options;
			var table = $(this);
			var a = "#" + o.id_all;
			table.find(a).click(function(){	
				var mk = $(a).attr('checked');
				if( mk == true ){
					$('input.'+o.cls_item).each(function(index){
						var temp = $(this).attr('checked');
						if(temp == false){
							$(this).attr('checked',true);
						}
					});		
				}else{
					$('input.'+o.cls_item).each(function(index){
						var temp = $(this).attr('checked');
						if(temp == true){
							$(this).attr('checked',false);
						}
					});		
				}
			});
		})
	}
})(jQuery);

注意，$(this)的改变。。

全选的问题搞定了。if是全选，else就是全部选了。

从相同的item我们可以发现，增加一个友好的操作。当checkbox有选中的时候，将全选框改为勾中状态。

//增加一些和全选有关的友好操作。
$('input.'+o.cls_item).click(function(){
	var x = $(this).attr('checked');
	if(x == true){
		$(a).attr('checked',true);
	}
});

接下来是鼠标移动加深tr变色。 

//mouseover变色
table.find("tr").bind("mouseover",function(){
	$(this).css("background-color","#dedede");
})
table.find("tr").bind("mouseout",function(){
	$(this).css("background-color","#fff");
})

接下来是隔行变色 

//隔行变色
table.find("tr:even").css("background-color","#999");

最后我建议啊，不要直接操作css，最好通过addclass这样来处理隔行变色。

基本上算是结束了，照例我会贴出所有的代码，可以自行改动。

js代码

(function($){
	jQuery.fn.tableSelectPlugin = function(options){
		var defaults = {
			id_all: "selAll",
			cls_item: "item",
		}
		var options = $.extend(defaults,options);
		return this.each(function(){
			var o = options;
			var table = $(this);
			var a = "#" + o.id_all;
			table.find(a).click(function(){	
				var mk = $(a).attr('checked');
				if( mk == true ){
					$('input.'+o.cls_item).each(function(index){
						var temp = $(this).attr('checked');
						if(temp == false){
							$(this).attr('checked',true);
						}
					});		
				}else{
					$('input.'+o.cls_item).each(function(index){
						var temp = $(this).attr('checked');
						if(temp == true){
							$(this).attr('checked',false);
						}
					});		
				}
			});

			//增加一些和全选有关的友好操作。
			$('input.'+o.cls_item).click(function(){
				var x = $(this).attr('checked');
				if(x == true){
					$(a).attr('checked',true);
				}
			});

			//mouseover变色
			table.find("tr").bind("mouseover",function(){
				$(this).css("background-color","#dedede");
			})
			table.find("tr").bind("mouseout",function(){
				$(this).css("background-color","#fff");
			})

			//隔行变色
			//table.find("tr:even").css("background-color","#999");

			//不要用css，把他封装起来，作为类比较好。

		})
	}
})(jQuery);

html代码。 

<html>
	<head>
		<title>jQuery</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
		<script src="jquery.tableSelectPlugin.js" type="text/javascript"></script>
	</head>
	<body>
<style>
table { font-size:12px; border:1px solid #dedede; margin:0 auto; }
table tr td { border: 1px solid #B1CDE3; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }
table tr .title { text-align:left; }
</style>
	<table>
		<tr>
			<th><label><input id="allSel" type="checkbox" name="all"/>全选</label></th>
			<th>名称</th>
			<th>详情页</th>
			<th>编辑宝贝</th>
			<th>状态</th>
			<th>预览</th>
			<th>创建时间</th>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item" /></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item" /></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
		<tr>
			<td><input type="checkbox" value="" class="item"/></td>
			<td>张三</td>
			<td>http://www.csdn.net</td>
			<td>编辑链接</td>
			<td>已编辑</td>
			<td>预览链接</td>
			<td>1986-1-4</td>
		</tr>
	</table>
<script>
$("table").tableSelectPlugin(
{
	id_all: "allSel",
	cls_item: "item",
}
);
</script>
	</body>
</html>
结束了，这样的一个简单的tableUI jquery插件。

后续如果我有时间会贴出一个更好的版本。

（2014年3月19日22:06:05）


澎蠡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html table中嵌入checkbox实现全选
Just Code
09-27 1万+
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% Connection ct = null; PreparedStatement ps = null; ResultSet rs = null; String DRIVER = "com.mys
Jquery列表条件批量checkbox全选
熙冰
01-10 321
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div> <table id="main"></t...
jquery.tablecheckbox:一个用复选框增强表格的最小jquery插件
05-31
jquery.table复选框 一个jQuery插件，可让您轻松地用可选行增强数据表。 安装 您在这里有几个选择： 从 Github 获取 使用凉亭安装： bower install jquery.tablecheckbox 使用 npm 安装： npm install jquery.tablecheckbox 特征 将行上的点击翻译到它们的复选框 支持表格标题中的主复选框 支持按住shift键选择多行 无需禁用文本选择就不会弄乱它们。 如果用户想要选择/取消选择文本，插件会避免妨碍用户，并在选择行时尝试对不需要的选择保持智能。 用法 <table> <thead> <th><input type="checkbox"></th> <th>Name</th> </thead> <tbody> <tr>
boostrap table插件的分页与checkbox
I大俊
07-23 1424
说明 今天需要实现这样一个功能，有checkbox列表可供选择，要求可以全选，全取消，不同页之间可选择并保存，需要保存上一步的选择信息。 最终实现的功能如图： 具体实现 首先，来看具体的代码，这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:fu
JQuery实现table表格checkbox全选的方法
玩火的稻草人的博客
06-02 1299
今天在页面中使用jQuery实现了全选框操作： 1、设计一个简单的表格： 设置表格列标题，在列标题中的单选框为全选框； 设置表格题，表格题的单选框就是普通的单选框啦； <table> <thead> <tr> <td> <input type="checkbox" onclick="selectAll(this.checked)" /> </td> &l
html表格中的复选框全选,jQuery实现table表格checkbox全选的方法分析
weixin_29530431的博客
06-03 772
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下：今天在页面中使用jQuery实现了全选框操作，如图：具体的实现过程很简单：第一步设计一个简单的表格：设置表格列标题，在列标题中的单选框为全选框；设置表格题，表格题的单选框就是普通的单选框啦：第二步通过jQuery实现当点击全选框的时候所有单选框都选中，当再次点击全选框的时候所有单选框都是未选中状...
jquery实现checkbox全选功能
影子
08-16 544
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery3.6.0.js"></script> </head> <body> <table> ，<thead> <tr> ...
jquery实现checkbox的单选和全选
hu531035580的博客
04-03 724
<input type="checkbox" name="all">全选</th><th>用户名</th><th>昵称</th><th>邮箱</th><th>角色</th><th>操作
jquery checkbox全选 获取值
weixin_30871293的博客
01-17 61
<style> table { line-height:35px; }</style> <div align="left" style="margin:5%"> <input type="checkbox" id="all"> <input type="button" value="全选...
jQuery实现table表格checkbox全选的方法分析
12-04
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题...
Jquery 1.42 checkbox 全选和反选代码
10-29
在网页交互设计中，全选和反选功能是常见的用户操作需求，特别是在处理多选列表时。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务。在这个例子中，我们将详细解析如何使用jQuery...
jQuery实现checkbox全选、反选及删除等操作的方法详解
10-16
jQuery是JavaScript的一个库，它极大地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在网页中，我们经常需要处理复选框（checkbox）的选择状态，例如全选、反选以及批量删除等操作。以下将详细讲解如何使用...
利用Bootstrap实现表格复选框checkbox全选
08-31
接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选和反选的功能。以下是一个简单的实现： ```javascript $(document).ready(function() { // 获取全选复选框 var checkAll = $('#checkAll'); ...
jquery之checkbox全选反选提交参数
php-yyds
11-06 628
标签来触发相应的操作方法。当点击不同的按钮时，相应的JavaScript代码会执行，实现了checkbox的全选、全不选、反选和提交功能。你可以根据自己的需求来处理选中的值，例如将其发送给服务器或进行其他操作。标签中编写了全选、全不选、反选和提交的操作方法。标签中，我们创建了一些checkbox选项，并使用。选择所有被选中的checkbox，并将其值存入。标签中引入了jQuery库，并在。在提交按钮的点击事件中，我们通过。在上述示例中，我们在。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1024
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 261
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1022
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 180
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
bootstrap获取table表单全选框事件
07-14
2. 接下来，使用JavaScript/jQuery来添加事件监听器，以便在全选框状态改变时执行相应的操作。你可以使用以下代码： ```javascript $(document).ready(function() { $('#selectAllCheckbox').change(function() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值