利用table元素,编写 类似163邮箱 checkbox的效果【实例】

最新推荐文章于 2022-07-11 07:35:00 发布
最新推荐文章于 2022-07-11 07:35:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： js 文章标签： table class function javascript xhtml scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwyuanliang10000/article/details/7196450
版权

1.源码如下，可以在下载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>table</title>
<script type="text/javascript" src="../js/jquery-1.6.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body{margin:0px;padding:0px;}
	ul,dl,dt,dd,form,p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}
	li{list-style:none}
	
	#lstBox{font-size: 12px;}
	#lstBox tbody a{text-decoration:none;padding:0 2px;color:#3B5998;width:25px;display:inline-block;}
	
	#lstBox thead tr th.tdLeft{text-align:left;}
	 
	#lstBox thead tr th{
		padding:12px 2px;
		text-align:center;
		font-weight: bold;
	}

	#lstBox tr td {
		border-top: 1px solid #EEEEEE;
		padding:12px 2px;
		text-align:center;
	}
	#lstBox tr td.tdLeft{
		text-align:left;
	}
	#lstBox tr.altitem td{background: #F9F9F9;}
	
	#lstBox tr.over td{background:#F9FAD1;}/*点击高亮显示*/
	
	#lstBox tr.hvr td{background:#EEF8FF;}/*徘徊显示*/
	
	#lstBox tr.out td{background:#cfeace;}/*徘徊显示*/
	
	.panel{
		position:relative;
		background: none repeat scroll 0 0 #FFFFFF;
	    width:48px;
	}
	
	.panel .root-item{
		width:40px;position:relative;
	}
	
	.panel .root-item .sub-list{
		width:40px;border:1px solid #CCCCCC;position:absolute;left:4px;top:16px;padding:5px 4px 5px 16px;display:none;
	}
	
	.panel .root-item .sub-list li{
		margin:0 10px 5px 0;width:35px;
	}
	.panel .root-item .sub-list li a:hover{
		background-color: #4BA88B
	}
		
	a{text-decoration:none;color:#3B5998;}
	
</style>
</head> 
<body>
	<form action="">
		<table id="lstBox" cellspacing="0">
			<thead>
				<tr>
					<th class="tdLeft" style="width: 50px">
						<div style="clear:both;">
							<ul id="panel"  class="panel">
								<li class="root-item" >
									<a href="javascript:void(0)">
										<input type="checkbox" name="allBox" id="checkAll" />
										<span id="showSubList">▼</span>
									</a>	
									<ul class="sub-list">
										<li id="allselectId" ><a  href="javascript:void(0)">全选</a></li>
										<li><a  href="javascript:void(0)">不选</a></li>
										<li><a  href="javascript:void(0)">反选</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</th>
					<th  class="tdLeft">标题</th>
					<th style="width:50px">阅读</th>
					<th style="width:50px">评论</th>
					<th style="width:70px">评论权限</th>
					<th style="width:140px">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">js+css position:relative;absolute;仿大众点评网首页 左边菜单效果[实例]</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">js 完成checkbox 全选与复选[实例]</td>
		 			<td>13</td>
		 			<td>111</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">hibernte 批量Update and del[实例]</td>
		 			<td>143</td>
		 			<td>111</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
		 			<td><a href="#" >编辑</a>|<a href="#" >置顶</a>|<a href="#" >删除</a></td>
				</tr>
				<tr>
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
						<td>
							<a href="#">编辑</a>|
							<a href="#">置顶</a>|
							<a href="#">删除</a>
						</td>
					</tr>
				<tr class="altitem">
					<td class="tdLeft">
						<input type="checkbox" name="box" class="box"/>
		 			</td>
		 			<td class="tdLeft">MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法</td>
		 			<td>93</td>
		 			<td>0</td>
		 			<td>禁止评论</td>
						<td>
							<a href="#">编辑</a>|
							<a href="#">置顶</a>|
							<a href="#">删除</a>
						</td>
					</tr>
			</tbody>
		
		
		</table>
	
	</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">

	$(document).ready(function(){
		 boxTrFun();	//点击每行，改变背景色 和checkbox状态
		 checkboxAllFun();//点击全选checkbox 的状态
		
	});
	
	//点击全选checkbox 的状态
	function checkboxAllFun(){
		$('#checkAll').click(function(){ 
          	var allFlag = $(this).is(':checked');
          	var $checkbox = $('[name=box]:checkbox');  
          	$checkbox.each(function(index){
			  	if(allFlag){
					$(this).parents('tr').addClass('over');	
				}else{
					$(this).parents('tr').removeClass('over');	
				}
					$(this)[0].checked = allFlag;
			});		
     	});  
	}
	
	
	//点击每行，改变背景色 和checkbox状态
	function boxTrFun(){
		var $lstBoxTr = $('#lstBox > tbody > tr');
		$lstBoxTr.click(function(event){
			//var flag = $(this).find('td:eq(0) > [name=box]:checkbox').is(':checked');//当前行checkbox状态
			//alert(flag);
			//已背景色变化 改变checbox的状态
			if($(this).hasClass('over')){
				$(this).removeClass('over');
				$($(this).find('td:eq(0) > [name=box]:checkbox'))[0].checked = false;	
			}else{
				//三目表达式嵌套
				$(this).hasClass('hvr') ? $(this).removeClass('hvr') : 
					($(this).hasClass('out') ? $(this).removeClass('out') : '');
				$(this).addClass('over');
				$($(this).find('td:eq(0) > [name=box]:checkbox'))[0].checked = true;	
			}
		
			_each_checkbox();
			
		}).mouseover(function(){
			if($(this).hasClass('altitem')){
				$(this).addClass('hvr');
			}else{
				$(this).addClass('out');
			}
	
		}).mouseout(function(){
			if($(this).hasClass('altitem')){
				$(this).removeClass('hvr');
			}else{
				$(this).removeClass('out');
			}
		});
		
		
	}
	
	//对他tbody中每个checbox遍历,设置checkall状态
	function _each_checkbox(){
		var eachflag = true;  
	    var allSelect = true;  
		//遍历每个checkbox
		$('[name=box]:checkbox').each(function(index){
			  eachflag = $(this).is(':checked');  
              if(!eachflag){  
                  allSelect  = false;  
                  $('#checkAll')[0].checked=false;  //用jquery 自己的方法 存在问题 ，故采用DOM对象
              }  
		});
		if(allSelect){//对全选进行设置  
              $('#checkAll')[0].checked=true;  
        }  
	}
	
	//点击全选 不选 反选
	$(function(){
		$('#lstBox .panel .root-item ul.sub-list li').click(function(){
			var index = parseInt($(this).index());
			
			var $checkbox = $('[name=box]:checkbox');  
			var $checkAll = $('#checkAll');
			switch(index){
				case 0:
				//全选
					/*$checkbox.each(function(index){
						var eachflag = $(this).is(':checked');
					  	if(!eachflag){
						  	$(this)[0].checked = true;
							$(this).parents('tr').addClass('over');	
						}
					});		
					$checkAll[0].checked=true;*/
					inverse_selectAll(true);
					break;
				case 1:
				//不选
					inverse_selectAll(false);
					/*$checkbox.each(function(index){
						var eachflag = $(this).is(':checked');
					  	if(eachflag){
						  	$(this)[0].checked = false;
							$checkbox.parents('tr').removeClass('over');	
						}
					});		
					$checkAll[0].checked=false;*/
					break;
				case 2:
				//反选
					var eachflag = true;  
			    	var allSelect = true;  
					
					//遍历每个checkbox
					$checkbox.each(function(index){
						  eachflag = $(this).is(':checked');
						  if(eachflag){//选中每个box
						  	$(this)[0].checked=false; 
						  	$(this).parents('tr').removeClass('over');
						  	allSelect  = false;  
						  }else{
						  	$(this)[0].checked=true;  
						  	$(this).parents('tr').addClass('over'); 
						  }
					});		
					if(allSelect){//对全选进行设置  
			             $checkAll[0].checked = true;
			        }else{
			        	 $checkAll[0].checked = false;
			        }  
					break;	
			}
		});
	});
	
	//flag true:全选 false 不选
	function inverse_selectAll(flag){
		var $checkbox = $('[name=box]:checkbox');
		var $checkAll = $('#checkAll');
		$checkbox.each(function(index){
			var eachflag = $(this).is(':checked');
			if(flag){
				if(!eachflag){
				  	$(this)[0].checked = flag;
					$(this).parents('tr').addClass('over');	
				}
			}else{
				if(eachflag){
				  	$(this)[0].checked = flag;
					$checkbox.parents('tr').removeClass('over');	
				}
			} 
		});		
		$checkAll[0].checked=flag;
	}
	
	//显示下拉框的状态
	$(function(){
		$('#showSubList').click(function(){
			$('.sub-list').toggle();
		});
	});
	
	//点击空白处 对下拉框hide
	document.onclick = function(e){
		var id;
	    if (!e) var e = window.event;
	    if (e.srcElement) {
	        id = e.srcElement.getAttribute("id")
	    } else {
	        id = e.target.getAttribute("id")
	    }
	    if(id != 'showSubList'){
	    	$('.sub-list').hide();
	    }
	}
	
</script>












AndyYuan10000
关注
专栏目录
HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”
王迪
11-09 4413
知识点：html文档基本结构、table标签布局、表单标签的使用、img标签、a标签、p标签等常见标签的使用。 制作网页效果：   网页制作思路： 1、将整个网页分成4部分：3个表格+底部段落文字（3个表格设置同样的宽度，水平居中，边框为0等属性） 2、表格1：一个1行2列的表格，左边单元格放logo图，右边单元格放“帮助” 3、表格2：一个1行1列的表格，单元格里放图片 4、表...
JAVAWEB开发之Tomcat内置连接池的配置和使用、DbUtils的使用详解和案例、以及元数据详解
02-21 2188
Tomcat内置连接池  Tomcat服务器内置连接池 使用的是dbcp框架  配置Tomcat内置连接池，通过JNDI方式 去访问Tomcat的内置连接池 JNDI Java命名和目录接口，是JAVAEE一项技术，允许将一个Java对象绑定到一个JNDI容器（Tomcat）中，并且为对象指定一个名称  通过javax.naming包Context对JNDI容器中绑定的对象进行查找，
利用table元素,编写 类似163邮箱 checkbox的效果【实例】（
01-12
利用table元素,编写 类似163邮箱 checkbox的效果【实例】（
邮件复选框
yuzhongkai的博客
04-16 1302
id="form1" action="" method="post"> border="1px" width="600" cellpadding="10" cellspacing="0"> colspan="4"> id="btn1" onclick="submit_form('btn1')" type="butto
终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)
TrueDei
05-18 6711
终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)
SSM 框架快速整合实例--学生查询
weixin_33919950的博客
05-10 277
一、快速准备 SSM 框架即 Spring 框架、SpringMVC 框架、MyBatis 框架，关于这几个框架的基础和入门程序，我前面已经写过几篇文章作为基础和入门介绍了。对于这 3 个框架还不熟悉的同学，可以参考一下几篇文章： 【SSH框架】之Spring系列（一） Spring框架系列（二）之Bean的注解管理 Spring框架系列之AOP思想 Spring 框架系列之 JDBC 整合 Sp...
【Web技术】网站留言系统开发，及留言信息实时发送至指定邮箱
拾年之璐
03-01 5748
【Web技术】网站留言系统开发，及留言信息实时发送至指定邮箱 关键字：HTML PHP JavaScript CSS 文章目录【Web技术】网站留言系统开发，及留言信息实时发送至指定邮箱0　简述1　背景及需求分析2　可行性研究3　基础知识3.1　前端HTML网页设计技术＜form＞标签表格＜input＞标记及其属性下拉列表框：＜select＞、＜option＞多行文本框＜textarea＞标记3....
sql server
xbnn的专栏
03-23 1万+
sql server 作者：Sanle  来源：博客园  发布时间：2006-04-27 13:06  阅读：3402 次  原文链接   [收藏]   1.清空日志:DUMP TRANSACTION 库名 WITH NO_LOG  2.截断事务日志:BACKUP LOG 数据库名 WITH NO_LOG  3.收缩数据库文件(如果不压缩,数据库的文件不会减小)
DBGridEh大全
jian704的专栏
09-01 1万+
查看完全版本：dbgrid应用全书论坛跳转到...╋名狐堂├名狐介绍├名狐讲座╋技术论坛├VFP 论坛├DELPHI├CGI、ASP、JAVA论坛├LINUX 论坛├dot NET论坛├其它语言C,C++,PB,VB╋专题技术├VFP + SQL Server├类的应用、VFP调用API├企业管理与软件╋情感论坛├情感
web06.JavaScript高级知识(四)
qvwvq的博客
08-04 470
事件流 事件流 事件流介绍 事件流的概念：事件流描述的是从页面中接收事件的顺序。事件发生后会在目标节点和 根节点之间按照特定的顺序传播、路径经过的节点都会接收到事件 例子：页面上有一个table 表格，分别在table表格、tbody 表格体、tr行、td单元格上绑定了click事件， 假如我在td 上执行了单击的操作，那么将会产生什么样的事件流呢? ​ 第一种事件传递顺序是:先触发最外层的table元素，然后向内传播，依次触发tbody、tr与td元素。 ​ 捕获型事件流 ​ 第二种事件传递顺序
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 5124
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
爬虫教程（ 1 ） --- 初级、基础、实践
墨鱼菜鸡
07-11 3087
爬虫教程：https://piaosanlang.gitbooks.io/spiders/content/ 如何入门 Python 爬虫：https://zhuanlan.zhihu.com/p/21479334 静觅 崔庆才的个人博客 Python 爬虫系列：http://cuiqingcai.com/category/technique/pyth...
easyui 自定义Loading效果
wwwyuanliang10000的专栏
03-30 1万+
//采用jquery easyui loading css效果 function ajaxLoading(){ $("").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); $("").html("正在处理，请稍候。。。").appendTo("body").css(
js 省市联动
wwwyuanliang10000的专栏
10-18 1万+
1. 2.2.    3.var selectOption={ "北京":{ "key":"北京", "values":{"东城":"东城","西城":"西城","崇文":"崇文","宣武":"宣武","朝阳":"朝阳","丰台":"丰台","石景山":"石景山","海淀":"海淀","门头沟":"门头沟","房山":"房山","通州":"通州","顺义":"顺义","昌平
jquery one time 事件每一秒种轮询一次
wwwyuanliang10000的专栏
03-21 5654
var checkTime= 60 * 1000; function nfscheck(){ $(document).stopTime("nfscheck"); AjaxPost("../json/check!nfscheck.htm", {}, function(res){ if(res!=null){ if(!res.success){ var msgStr
js上下点击排序
wwwyuanliang10000的专栏
06-12 5248
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'index.jsp' starting page
js+css position:relative;absolute;仿大众点评网首页 左边菜单效果[实例]
wwwyuanliang10000的专栏
01-09 4877
1.css .panel{ position:relative; background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #F8CFA5; color: #61646E; width:138px; border-width: 0 1px 1px; } .
IOS源码实现类似js的checkbox效果库
资源摘要信息:"IOS应用源码——类似js的checkbox效果的效果库.zip" 知识点： 1. IOS应用源码：本文件包提供了一个iOS平台的应用源码，开发者可以利用此源码进行学习和开发，以便创建出具备特定功能的应用程序。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值