| jQuery：1.5.4.4,表格變色（單擊行，把當行的復選框(checkbox)設為選中狀態，並應用當前樣式） HTML代碼返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.even
{
background-color: Gray;
}
/*奇數行樣式*/
.odd
{
background-color: Lime;
}
/*偶數行樣式*/
.selected
{
background-color: Yellow;
}
</style>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tbody>tr:even").addClass("even"); /*給奇數行添加樣式*/
$("tbody>tr:odd").addClass("odd"); /*偶數行添加樣式*/
/*把單擊行時，如果行處於沒選中狀態，則把樣式設為選中狀態
，當中的復選框設為選中狀態；否則，移除選中狀態，取消選中狀態*/
$("tbody>tr").click(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected")
.find(":checkbox").attr("checked", false);
}
else {
$(this).addClass("selected")
.find(":checkbox").attr("checked", true);
}
});
});
</script>
</head>
<body>
<h3>
表格變色</h3>
<table style="width: 300px;">
<thead>
<tr>
<th>
</th>
<th>
name
</th>
<th>
sex
</th>
<th>
age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="items" />
</td>
<td>
rain
</td>
<td>
male
</td>
<td>
23
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="items" />
</td>
<td>
rain
</td>
<td>
male
</td>
<td>
23
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="items" />
</td>
<td>
rain
</td>
<td>
male
</td>
<td>
23
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="items" />
</td>
<td>
rain
</td>
<td>
male
</td>
<td>
23
</td>
</tr>
<tbody>
</table>
</body>
</html>
| jQuery：1.5.4.4.B,效果截圖返回頂部 |
