您的位置：首页 > Web前端 > JQuery

Jquery操作DOM

2015-06-30 11:22 597 查看

数据删除和图片预览在项目中的应用
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航