Aplicação de Exclusão de Dados e Visualização de Imagens em Projetos

Visualização do efeito

renderizações

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();//隐藏图片
	})
})

Aplicação de Exclusão de Dados e Visualização de Imagens em Projetos

Aplicação de Exclusão de Dados e Visualização de Imagens em Projetos

Visualização do efeito

html

css

JavaScript

Acho que você gosta