读书笔记--数据删除和图片预览在项目中的应用_图片预览与数据删除:在页面中创建一个表格,记录间隔行变色,记录可以实现单选、全-CSDN博客

本文链接：https://blog.csdn.net/qq_37697037/article/details/60339274

需求分析：

（1）在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每行数据

（2）如果选中表格中某行的复选项，并单击表格下面的删除按钮，那么将删除其选中的行，选中全选复选框后，再次单击删除按钮时，将删除表格的全部行数据

（3）如果将鼠标移动到表格中某行的小图片上，将在该图片的右下角出现一幅与之对应的大图片，用以显示图片预览效果

功能实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" href="css/lianxi.css" rel="stylesheet">
		<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
		<script type="text/javascript">
		  $(function(){
		  	//隔行变色
		  	$("table tr:nth-child(odd)").css("background-color","#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('#chkAll')").each(function(index){
            		if(this.checked){
            			$("table tr[id="+this.value+"]").remove();
            		}
            	})
            })
            //小图片鼠标移动事件
            var x=5;var y=5;//初始化提示图片的位置
            $("table tr td img").mousemove(function(e){
            	$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000);
            })
            //小图片鼠标移出事件
            $("table tr td img").mouseout(function(e){
            	$("#imgTip").hide();
            })
		  })
		</script>
	</head>
	<body>
	  <table>
	  	<tr>
	  		<th>选项</th>
	  		<th>编号</th>
	  		<th>封面</th>
	  		<th>购书人</th>
	  		<th>性别</th>
	  		<th>购书价</th>
	  	</tr>
	  	<tr id="0">
	  		<td><input type="checkbox" id="Checkbox1" value="0"></td>
	  		<td>1001</td>
	  		<td><img src="img/IMG_20161006_151540.jpg.JPG"></td>
	  		<td>李晓明</td>
	  		<td>男</td>
	  		<td>35.60元</td>
	  	</tr>
	  	<tr id="1">
	  		<td><input type="checkbox" id="Checkbox2" value="1"></td>
	  		<td>1002</td>
	  		<td><img src="img/IMG_20161104_100936.JPG.JPG"></td>
	  		<td>刘明明</td>
	  		<td>女</td>
	  		<td>37.80元</td>
	  	</tr>
	  	<tr id="2">
	  		<td><input type="checkbox" id="Checkbox2" value="2"></td>
	  		<td>1003</td>
	  		<td><img src="img/IMG_20161106_164158.jpg.JPG"></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="img/IMG_20161117_160619.jpg.JPG" />
	</body>
</html>

CSS文件：

body{
	font-size: 12px;
}
table{
	width: 360px;
	border-collapse: collapse;
}
table tr th,td{
	border: solid 1px #666;
	text-align: center;
}
table tr td 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;
}

摘自《jQuery权威指南》

界面效果