jQuery 全選/反選以及單擊行改變背景色實例

　　我先把CSS樣式放出來其實這個可以直接忽略

復制代碼 代碼如下:
body{margin:;padding:;fontsize:px;fontfamily:微軟雅黑;}
datagrid{width:%;}
datagird tr th{backgroundcolor:#; fontsize:px;}
datagrid tr th datagrid tr td{border:px solid #ccc; bordercollapse:collapse;}
/* 選中行樣式 */
tablerowselected{background:#ffff;}

　　
我們再來看頁面HTML結構

復制代碼 代碼如下:
<div id="page">
<table class="datagrid" cellpadding="" cellspacing="">
<thead>
<tr>
<th><input id="CheckAll" name="checkall" type="checkbox" /></th>
<th>ID</th>
<th>標題</th>
<th>發布人</th>
<th>發布時間</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>阿裡做對了哪三件事？</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>大盤點被互聯網改寫的個傳統行業</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>如果智能手機市場有變酷派們怎麼辦？</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>看看福特們是如何抵御谷歌蘋果的？</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
</tbody>
</table>
</div>

　　
實現功能
）單擊行改變背景色

復制代碼 代碼如下:
$("datagrid tbody tr")bind("click" function () {
var oThis = $(this);
if (oThishasClass("tablerowselected")) {
oThisremoveClass("tablerowselected");
oThischildren("td:eq()")children("input[name=check]")removeAttr("checked");
} else {
oThisaddClass("tablerowselected");
oThischildren("td:eq()")children("input[name=check]")attr("checked" "checked");
}
});

　　
）全選/反全選功能（未完成待續）

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25501.html