<!--用jQuery写的表格变色练习-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table {
500px;
text-align: left;
font-size: 14px;
}
tr {
height: 25px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
$("tr:first th").css("border-bottom","1px solid black");
$("tr:odd").css("background","yellow");
$("tr").click(function () {
var $in = $(this).find("input");
//点击勾选or取消勾选
$in.prop("checked",!$in.prop("checked"));
//点击改变背景颜色or还原背景颜色
if ($in.prop("checked")) {
$(this).attr("style","background:orange");
} else {
if ($(this).index()%2 == 0) {
$(this).attr("style","background:white");
} else {
$(this).attr("style","background:yellow");
}
}
});
})
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td>Lucy</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</table>
</body>
</html>