选中表格中相应行的复选框,点击下面的“删除”按钮可以删除相应的行,选中下面的"全选"复选框,则所有行的复选框全部选中,取消则全部取消。 鼠标移动到封面上在旁边显示大图,鼠标移开,大图消失
<%@ 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>
分享到:
相关推荐
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时,页面中所有的复选框都应该为选中状态, 1.1、当再次点击'全选'按钮时,所有的复选框应该是非选中状态。 1.2、当点击子复选框时,'全选'按钮应该是非选中...
实现全选,全不选,反选,获取选中的值 。
jquery实现全选反选全不选案例,在入场网页开发中实现。
实现全选全不选反选 并且,如果是在全选状态下将子复选框的选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
jquery 复选框 全选,全不选,在同一个按钮实现,格式是html
选中全选复选框 所有的复选框都选上,如果取消全选,所有的复选框都取消勾选,如果选中一个复选框,那么全选复选框就也勾选上,当所有的复选框取消选择,全选复选框也取消选中状态...
jquery 、js实现复选框 (全选、反选)功能··
实现了复选框全选的功能,不需要在外面另加按钮触发全选事件
《锋利的jquery》利用jquery实现复选框的全选和反选
复选框实现datagridview全选反选和全不选,datagridview换颜色(选中复选框之后)
jquery版本的复选框全选和不选,简单而且好用,我是在项目中摘要出来的小示例。
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
Datagridview控件没有全选或取消全选的复选框,本资源用VB2015通过扩展DataGridViewColumnHeaderCell类,在列头绘制一个复选框checkbox控件,通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...
QTableWidget表头添加复选框实现全选功能。有点投机取巧,但是功能是实现了。实现很简单。
js 实现 复选框全选(二)! 值得下载看看!资源免费,大家分享!!
jquery实现全选和全不选,只要有一个复选框没有选中,全选框不选中;
复选框全选全不选JS代码,可以通过按钮或者复选框调用。
主要实现判断所有的复选框选中时,做某些操作,例如使全选按钮选中,当有一项不选中时,则使全选按钮不勾选
DataGridView 复选框列实现全选。点击列头的复选框下面的行全部选中或者全部取消。
jquery Checkbox 全选 反选 全不选 多种实现方法 和表单验证