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

最新推荐文章于 2023-04-02 15:32:51 发布

letIgo

最新推荐文章于 2023-04-02 15:32:51 发布

阅读量6.6k

点赞数 1

文章标签： class function border input table xhtml

本文链接：https://blog.csdn.net/letIgo/article/details/7350532

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
img
{
width: 60px;
height: 60px;
}
#tab
{
border: solid #666;
border-width: 1px 0px 0px 1px;
text-align: center;
}
.td1
{
border: solid #666;
border-width: 0px 1px 1px 0px;
}
th
{
border: solid #666;
border-width: 0px 1px 1px 0px;
}
.imgclass
{
position: absolute;
border: solid 1px #eee;
width: 200px;
height: 350px;
display: none;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//实现全选或全不选功能
$('#checkall').click(function () {
$(' :checkbox').attr('checked', this.checked); //设置checkbox类型控件的checked属性
})
//实现删除功能
$('#delect').click(function () {
//选取form标记中的checkbox类型的控件，并且对其进行遍历
$('#form1 :checkbox').each(function () {
//判断checkbox类型的标记是否被选中，选中则进行删除
if (this.checked) {
//alert(this.value);
$('tr').remove('tr[id=' + this.value + ']'); //根据tr标记的id属性进行删除
}
})
})
//当鼠标放到图片上时实现图片放大的功能
$('table tr td img').bind('mouseover', function (e) {
var img = $('#imgshow').attr('src', this.src);
//img.show();

img.css({ top: (e.pageY + 10), left: (e.pageX + 5) }).show();
})
//当鼠标离开图片时实现放大后的图片隐藏功能
$('table tr td img').bind('mouseout', function () {
$('#imgshow').hide();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
全选<input type="checkbox" id="checkall" />
</td>
<td>
<input type="button" id="delect" value="删除" />
</td>
</tr>
</table>
<table id="tab">
<tr>
<th>
操作
</th>
<th>
编号
</th>
<th>
封面
</th>
<th>
作者
</th>
<th>
数量
</th>
<th class="style1">
单价
</th>
</tr>
<tr id="0">
<td class="td1">
<input type="checkbox" value="0" />
</td>
<td class="td1">
001
</td>
<td class="td1">
<img alt="" src="images/林心如.jpg" />
</td>
<td class="td1">
小贝
</td>
<td class="td1">
100
</td>
<td class="td1">
50
</td>
</tr>
<tr id="1">
<td class="td1">
<input type="checkbox" value="1" />
</td>
<td class="td1">
002
</td>
<td class="td1">
<img alt="" src="images/林志玲.jpg" />
</td>
<td class="td1">
小白
</td>
<td class="td1">
50
</td>
<td class="td1">
25
</td>
</tr>
<tr id="2">
<td class="td1">
<input type="checkbox" value="2" />
</td>
<td class="td1">
003
</td>
<td class="td1">
<img alt="" src="images/林黛玉.jpg" />
</td>
<td class="td1">
小丛
</td>
<td class="td1">
100
</td>
<td class="td1">
50
</td>
</tr>
</table>
</div>
<img alt="" class="imgclass" id="imgshow" />
</form>
</body>
</html>