<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table
{
width: 300px;
} table, th, tr, td
{
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
} td
{
vertical-align: middle;
text-align: center;
} .even
{
background: #fff38f;
}
.odd
{
background: #ffffee;
}
.selected
{
background: lightgreen;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
$("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/
$("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ //将某一行加高亮
//$("tr:contains('刘虹')").addClass("selected"); //选中某行加高亮
$("tbody>tr").click(function () {
$(this).addClass("selected")
.siblings().removeClass("selected") //去掉兄弟行的样式
.end() //返回到当前对象
.find(":radio").attr("checked", true)
.parent().parent()
.siblings().find(":radio").attr("checked", false); }); }); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th>
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
暂住地
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" />
</td>
<td>
何龙龙
</td>
<td>
男
</td>
<td>
苏州
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
王龙
</td>
<td>
男
</td>
<td>
南京
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
刘虹
</td>
<td>
女
</td>
<td>
天津
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
张晓丹
</td>
<td>
女
</td>
<td>
圣地亚哥
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
Dannis
</td>
<td>
女
</td>
<td>
Washionton
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
何以琛
</td>
<td>
男
</td>
<td>
大阪
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
效果图：