数据管理（案例）

最新推荐文章于 2024-05-17 10:46:46 发布

yecats

最新推荐文章于 2024-05-17 10:46:46 发布

阅读量1.1k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/yecats/article/details/51611135

版权

JQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>数据管理</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:12px;
	}
	table{
		width:400px;
		border-collapse:collapse;

	}
	table tr th,td{
		border:solid 1px #666;
		text-align:center;
		
	}
	table tr td img{
		border: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;
		fifter:progid:DXImageTransfrom.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);
	}
 </style>
 
 <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')").length;//不能有空格
			//alert(intL);调试
			if(intL!=0){
				$("table tr td input[type=checkbox]:not('#chkAll')")//注意选择器
				.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).css({"top":(e.pageY +y)+"px","left":(e.pageX +x)+"px"}).show(300);
		});


		$("table tr td img").mouseout(function(e){
			$("#imgTip").hide();
		});





	});

 </script>
 <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>1002</td>
			<td><img src="Images/2.jpg" alt="" /></td>
			<td>李晓星</td>
			<td>男</td>
			<td>34.50元</td>
		</tr>
		<tr id="1">
			<td><input id ="Checkbox2" type="checkbox" value="1" /></td>
			<td>1003</td>
			<td><img src="Images/2.jpg" alt="" /></td>
			<td>李晓星</td>
			<td>男</td>
			<td>34.50元</td>
		</tr>
		<tr id="2">
			<td><input id ="Checkbox3" type="checkbox" value="2" /></td>
			<td>1004</td>
			<td><img src="Images/2.jpg" alt="" /></td>
			<td>李晓星</td>
			<td>男</td>
			<td>34.50元</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="Images/1.jpg" alt="" />
 </body>
</html>