Jquery操作DOM

最新推荐文章于 2024-05-16 04:04:41 发布

caolipeng_918

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量872

点赞数

分类专栏：分享学习文章标签： jquery DOM 应用 CSS

本文链接：https://blog.csdn.net/caolipeng_918/article/details/46693107

版权

分享学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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

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

3>如果将鼠标移动到表格中某行的小图片上，将在该图片的右下脚出现一副与之对应的大图片，用以实现图片预览效果。

<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=UTF-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery操作DOM</title>
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<style type="text/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;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
	$(function(){
		$("table tr:nth-child(odd)").css("background-color","#eee");//隔行变色
		/**全选复选框 单击事件 **/
		$("#checkAll").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[type='checkbox']:checked").not('#checkAll').length;
			if(intL != 0){//如果有选中项 
				$("table tr td input[type=checkbox]").not('#checkAll').each(function(index){
					if(this.checked){//如果选中 
						alert(this.value);
						$("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();//隐藏图片 
		})
	})
</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="../images/img03.gif" alt="" /></td>
    			<td>李小明</td><td>男</td><td>35.60元</td>
    		</tr>
    		
    		<tr id="1">
    			<td><input id="checkbox2" type="checkbox" value="1"/></td>
    			<td>1002</td><td><img src="../images/img04.gif" alt="" /></td>
    			<td>刘明明</td><td>女</td><td>37.60元</td>
    		</tr>
    		
    		<tr id="2">
    			<td><input id="checkbox3" type="checkbox" value="2"/></td>
    			<td>1003</td><td><img src="../images/img08.gif" alt="" /></td>
    			<td>张小星</td><td>女</td><td>45.60元</td>
    		</tr>
    	</table>
    	<table>
    		<tr>
    			<td style="text-align:left;height:28px">
    				<span><input id="checkAll" type="checkbox">全选</input></span>
    				<span><input id="btnDel" type="button" value="删除" class="btn"/></span>
    			</td>
    		</tr>
    	</table>
    	<img id="imgTip" src="../images/img11.gif" class="clsImg" alt="删除属性" />
    </body>
</html>