我先把css样式放出来，其实这个可以直接忽略
复制代码 代码如下:
body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;}
.datagrid{width:100%;}
.datagird tr th{background-color:#191970; font-size:14px;}
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* 选中行样式 */
.table-row-selected{background:#fff68f;}
我们再来看页面html结构
复制代码 代码如下:
id
标题
发布人
发布时间
1
阿里做对了哪三件事？
internet
2013-07-01
2
大盘点：被互联网改写的16个传统行业
internet
2013-07-01
3
如果智能手机市场有变，酷派们怎么办？
internet
2013-07-01
4
看看福特们是如何抵御谷歌苹果的？
internet
2013-07-01
实现功能
1）单击行改变背景色
复制代码 代码如下:
$(.datagrid tbody tr).bind(click, function () {
var othis = $(this);
if (othis.hasclass(table-row-selected)) {
othis.removeclass(table-row-selected);
othis.children(td:eq(0)).children(input[name='check']).removeattr(checked);
} else {
othis.addclass(table-row-selected);
othis.children(td:eq(0)).children(input[name='check']).attr(checked, checked);
}
});
2）全选/反全选功能（未完成，待续）