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

jQuery 实现全选全不选，删除选中复选框所在行，鼠标悬停在图片上显示大图

2012-03-14 17:08 866 查看

选中表格中相应行的复选框，点击下面的“删除”按钮可以删除相应的行，选中下面的"全选"复选框，则所有行的复选框全部选中，取消则全部取消。鼠标移动到封面上在旁边显示大图，鼠标移开，大图消失

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="作业（全选全不选）.aspx.cs" Inherits="作业_全选全不选_" %>

<!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 runat="server">

<title></title>

<style type="text/css">

.style1

{

width: 45%;

height: 191px;

}

.style2

{

width: 45px;

}

.style3

{

width: 144px;

}

.style4

{

width: 117px;

}

td

{ border:1px solid blue;

}

.imgclass{ position:absolute; border:solid 1px #eee; width:200px; height:350px; display:none;}

#divsecond

{

position:absolute;

width:200px; height:200px;

border:5px solid red;

background-color:Red;

}

</style>

<script src="Jquery1.7.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#CheckAll').click(function () {

$('table :checkbox').attr('checked', this.checked); //全选全不选

})

$('#Delete').click(function () {

var ck = $('#form1 :checkbox:not(#CheckAll)');

ck.each(function (index) { //index 指的是ck的每个元素,也可用别的字符表示

if (this.checked) {

$(' table tr[id=' + this.value + ']').remove();

}

})

})

$('table tr td image').mousemove(function (e) {

$('#imgshow').attr('src', this.src).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();

})//鼠标悬停在小图上面显示大图 e.pageY + 5为大图片左上角距离鼠标的垂直距离

$('table tr td image').mouseout(function () {

$('#imgshow').hide();

})//鼠标移开大图消失

})

</script>

</head>

<body>

<form id="form1">

<div>

<table class="style1" id="table1" style="border: 1px solid blue;">

<tr id="first">

<td class="style2">

</td>

<td class="style3">

书名</td>

<td class="style4">

图片</td>

<td>

作者</td>

<td>

价格</td>

</tr>

<tr id="0">

<td class="style2">

<input id="Checkbox1" type="checkbox" value="0"/></td>

<td class="style3">

《林志颖传奇》</td>

<td class="style4">

<img alt="" src="images/林志颖.jpg" style="width: 70px; height: 71px"/> </td>

<td>

张海涛</td>

<td>

￥1</td>

</tr>

<tr id="1">

<td class="style2">

<input id="Checkbox2" type="checkbox" value="1"/></td>

<td class="style3">

《林心如传奇》</td>

<td class="style4">

<img alt="" src="images/林心如.jpg" style="height: 71px; width: 61px" id="thirdimg"/></td>

<td>

白宁宁</td>

<td>

￥1</td>

</tr>

<tr id="2">

<td class="style2">

<input id="Checkbox3" type="checkbox" value="2"/></td>

<td class="style3">

《林志玲传奇》</td>

<td class="style4">

<img alt="" src="images/林志玲.jpg" style="height: 66px; width: 64px" id="forthimg"/></td>

<td>

戴鹏飞</td>

<td>

￥1</td>

</tr>

<tr id="3">

<td class="style2">

<input id="Checkbox4" type="checkbox" value="3"/></td>

<td class="style3">

《林黛玉传奇》</td>

<td class="style4">

<img alt="" src="images/林黛玉.jpg" style="height: 66px; width: 65px" id="fifthimg"/></td>

<td>

吴超</td>

<td>

￥1</td>

</tr>

</table>

<br />

<input id="CheckAll" type="checkbox"/>全选

<input id="Delete" type="button" value="删除" style="width: 74px; height: 24px"/>

</div>

<img class="imgclass" id="imgshow" />

</form>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航