<html>
<head>
<script type="text/javascript" >
$(function() {
$("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色
/**全选复选框单击事件**/
$("#chkAll").click(function() {
if (this.checked) {//如果自己被选中
$("table tr td input[type=checkbox]:not('#chkOther')").attr("checked", true);
}
else {//如果自己没有被选中
$("table tr td input[type=checkbox]:not('#chkOther')").attr("checked", false);
}
})
/*反选复选框单击事件*/
$('#chkOther').click(function(){
$("#list :checkbox").each(function(){
// $(this).attr("checked", !$(this).attr("checked"));
if (this.checked) {
$(this).attr("checked", false);
} else {
$(this).attr("checked", true);
}
})
});
/**删除按钮单击事件**/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项
if (intL != 0) {//如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {//遍历除全选复选框外的行
if (this.checked) {//如果选中
$("table tr[id=" + this.value + "]").remove(); //获取选中的值，并删除该值所在的行
}
})
}
})
/**小图片鼠标移动事件**/
var x = 5; var y = 15;//初始化提示图片位置
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src)//设置提示图片scr属性
.css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })//设置提示图片的位置
.show(300);//显示图片
})
/**小图片鼠标移出事件**/
$("table tr td img").mouseout(function() {
$("#imgTip").hide();//隐藏图片
})
})
</script>
</head>
<body>
<table id="list">
<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.jpg" 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.jpg" alt="" /></td>
<td>刘明明</td>
<td>女</td>
<td>37.80 元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt="" /></td>
<td>张小星</td>
<td>女</td>
<td>45.60 元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input id="chkAll" type="checkbox" />全选/全不选</span>
<span><input id="chkOther" type="checkbox" />反选 </span>
<span><input id="btnDel" type="button" value="删除" class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif"/>
</body>
</html>
墨衍会员
·
AI 创作全网分发
墨衍智能分发
本文由作者通过墨衍一键同步至各平台
1分发平台
500+累计阅读
519平均单平台
已同步平台
CSDN
微信公众号
微博
知乎
掘金
百家号
博客园
抖音
小红书
你的文章也可以这样分发
墨衍会员 ¥399起/年，写一次发全网
我也要
522
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
