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

最新推荐文章于 2023-05-25 08:32:18 发布

iteye_3606

最新推荐文章于 2023-05-25 08:32:18 发布

阅读量275

点赞数

文章标签： xhtml javascript c# ViewUI

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

<%@ 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>