<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
width:100%;
}
table, td {
border:1px solid #ccc;
border-collapse:collapse;
height:30px;
}
td {
width:20%;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
//隔行改变背景色
$("tr:odd").css("background-color", "#e5e5e5");
//全选
$("#selAll").click(function(){
$(":checkbox").attr("checked", "checked");
});
//反选
$("#selRev").click(function(){
$(":checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
});
//取消全选
$("#selCancel").click(function(){
$(":checkbox").attr("checked", "");
});
//选中当前行的checkbox
$("tr:odd").each(function(){
$(this).click(function(){
var e = $(this).children("td").children(":checkbox");
if(e[0].checked) {
e.attr("checked", "");
} else {
e.attr("checked", "checked");
}
});
$(this).hover(function(){
$(this).css("background-color", "#FFE1FF");
}, function(){
$(this).css("background-color", "#e5e5e5");
});
})
$("tr:even").each(function(){
$(this).click(function(){
var e = $(this).children("td").children(":checkbox");
if(e[0].checked) {
e.attr("checked", "");
} else {
e.attr("checked", "checked");
}
});
$(this).hover(function(){
$(this).css("background-color", "#FFE1FF");
}, function(){
$(this).css("background-color", "#fff");
});
})
$(":checkbox").click(function(){
$(this).attr("checked") ? $(this).attr("checked", false) : $(this).attr("checked", true);
});
})
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<button id="selAll">全选</button>
<button id="selRev">反选</button>
<button id="selCancel">取消全选</button>
</p>
</body>
</html>
jQuery实现table隔行变色、鼠标移上变色、全选 取消全选 反选
最新推荐文章于 2019-01-09 12:04:32 发布