1、表格变色
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');$('tbody>tr').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});整体代码：
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></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);
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :radio:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>多项选择可以选择多个高亮，主要在于高亮的判断
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//对表单进行操作
$('tbody>tr').click(function() {
//判断是否是高亮了，使用hasclass（）
if($(this).hasClass('selected')){
$(this).removeClass('selected')
.find(':checkbox').attr('checked',false);
}else{
$(this).addClass('selected')
.find(':checkbox').attr('checked', true);
}
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :checkbox:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>