<head>
<style type="text/css">
.even {
background-color: #fff38f;/*偶数行样式*/
}
.odd {
background-color: #dcdcdc;/*奇数行样式*/
}
.selected {
background-color: #ff4136;
}
table{
width: 50%;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>/*导入jquery包*/
<script type="text/javascript">
$(function() {
$("tbody>tr:odd").addClass("odd");//给奇数行添加样式
$("tbody>tr:even").addClass("even");//给偶数行添加样式
$("tbody>tr").click(function(){//绑定事件
if(!$(this).hasClass('selected')){//判断本行是否被选中
$(this).addClass('selected').find("input").attr("checked",true);//添加selected样式，然后找到多选框，把它的checked属性改为true
}else{
$(this).removeClass('selected').find("input").attr("checked",false);//同上相反
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr><td></td><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<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>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
效果图：
