<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>列表中被点击的行加高亮背景色</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript">
//点击某行后，高亮点中行的样式
function heightBrightTR(thisObj){
var thisTD = $(thisObj).parent(); //<a> 链接所在上层单元格td对象
var thisTR = thisTD.parent(); //<a> 链接所在上层行tr对象
thisTR.addClass('trBgStyle'); //添加背景高亮色
thisTR.siblings('tr').removeClass('trBgStyle'); //将同级同胞的背景色置空
}
</script>
<style type="text/css">
.trBgStyle{background:#ffff66;} /* 用于点击后改变行背景色 */
</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<th>id号</th>
<th>链接地址</th>
</tr>
<tr>
<td>2</td>
<td><a onclick="heightBrightTR(this)" target="_blank" href="http://www.google.com.hk">Google</a></td>
</tr>
<tr>
<td>1</td>
<td><a onclick="heightBrightTR(this)" target="_blank" href="http://www.baidu.com">百度</a></td>
</tr>
<tr>
<td>4</td>
<td><a onclick="heightBrightTR(this)" target="_blank" href="http://cn.msn.com">MSN中文网</a></td>
</tr>
</table>
</body>
</html>
