数据删除和图片预览在项目中的应用

最新推荐文章于 2021-10-20 14:05:49 发布

yilingpupu

最新推荐文章于 2021-10-20 14:05:49 发布

阅读量359

点赞数

分类专栏：具体案例---关于jQuery 小白学习文章标签： jquery html css checkbox

本文链接：https://blog.csdn.net/yilingpupu/article/details/105490801

版权

小白学习同时被 2 个专栏收录

29 篇文章 3 订阅

订阅专栏

具体案例---关于jQuery

6 篇文章 0 订阅

订阅专栏

数据删除和图片预览在项目中的应用

效果预览

效果图

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据删除和图片预览在项目中的应用</title>
		<link href="./date.css" rel="stylesheet" type="text/css" />
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
	</head>
	<body>
		<table>
			<tr>
				<th>选项</th>
				<th>编号</th>
				<th>封面</th>
				<th>购书人</th>
				<th>性别</th>
				<th>购书价</th>
			</tr>
			<tr id="0">
				<td><input id="checkbox1" type="checkbox" value="0" /></td>
				<td>1001</td>
				<td><img src="personal.jpg" width="30px" alt=""></td>
				<td>李小明</td>
				<td>男</td>
				<td>35.60元</td>
			</tr>
			<tr id="1">
				<td><input id="checkbox1" type="checkbox" value="1" /></td>
				<td>1002</td>
				<td><img src="personal.jpg" width="30px"  alt=""></td>
				<td>刘明明</td>
				<td>女</td>
				<td>37.80元</td>
			</tr>
			<tr id="2">
				<td><input id="checkbox1" type="checkbox" value="2" /></td>
				<td>1003</td>
				<td><img src="personal.jpg" width="30px" alt=""></td>
				<td>张小星</td>
				<td>女</td>
				<td>45.60元</td>
			</tr>
		</table>
		<table>
			<tr>
				<td style="text-align: left;height: 28px;">
					<span><input id="chkall" type="checkbox" />全选</span>
					<span><input id="btndel" type="button" value="删除" class="btn" /></span>
				</td>
			</tr>
		</table>
		<img id="imgtip" class="clsimg" src="personal.jpg" />
		
		<script type="text/javascript" src="./date.js"></script>
	</body>
</html>

css

body{
	font-size: 12px;
}
table{
	width: 360px;
	border-collapse: collapse;
	/* 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 */
	
}
table tr th,td{
	border: solid 1px #666;
	text-align: center;
}
table tr th img{
	border: solid 1px #ccc;
	padding: 3px;
	width: 42px;
	height: 60px;
	cursor: hand;
	/* 设置鼠标为手型 */
}
table tr td span{
	float: left;
	padding-left: 12px;
}
table tr th{
	background-color: #ccc;
	height: 32px;
}
.clsimg{
	position: absolute;
	border: solid 1px #ccc;
	padding: 3px;
	width: 85px;
	height: 120px;
	background-color: #eee;
	display: none;
}
.btn{
	border: #666 1px solid;
	padding: 2px;
	width: 50px;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,StartColorStar = #fff,EndcolorStar = #ECE9D8);
	/* FILTER:progid:DXImageTransform.Microsoft.Gradient使用 
	语法： 
	filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 
	属性： 
	enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false 
	　　true: 默认值。滤镜激活。 
	　　false:滤镜被禁止。 */
}

JavaScript

$(function(){
	$("table tr:nth-child(odd)").css("background","#eee");// 隔行变色
	
	// 全选复选框事件
	$("#chkall").click(function(){
		if(this.checked){//如果自己被选中
			$("table tr td input[type=checkbox]").attr("checked",true);
		}
		else{//如果自己没有被选中
			$("table tr td input[type=checkbox]").attr("checked",false);
		}
	})
	
	// 删除按钮单击事件
	$("#btndel").click(function(){
		var intl = $("table tr td input:checked:not('#checkall')").length;//获取除了全选复选框以外的所有选中项
		if(intl != 0){//如果有选中项
			$("table tr td input:checked:not('#checkall')").each(function(index){//遍历除去全选复选框外的行
				if(this.checked){//如果选中
					$("table tr[id=" + this.value + "]").remove();//获取选中的值，并且删除改值所在的行
				}
			})
		}
	})
	
	// 小图标鼠标移动事件
	var x=5; var y=15;//初始化提示图标的坐标位置
	$("table tr td img").mousemove(function(e){
		$("#imgtip").attr("src",this.src)//设置提示图片的src属性
		.css({"top": (e.pageY + y) +"px","left": (e.pageX + x) +"px"})//设置提示图片的位置
		.show(3000);//显示图片
	})
	
	//小图片鼠标移出事件
	$("table tr td img").mouseout(function(){
		$("#imgtip").hide();//隐藏图片
	})
})

yilingpupu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据删除和图片预览在项目中的应用

数据删除和图片预览在项目中的应用效果预览html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数据删除和图片预览在项目中的应用</title> <link href="./date.css" rel="stylesheet" ...
复制链接

扫一扫

专栏目录