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");
}
});

）全选/反全选功能（未完成待续）