JQuery学习笔记17——单选框控制表格行高亮
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>单选框控制表格行高亮</title>
6<script type="text/javascript" src="jquery-1.3.1.js"></script>
7<script type="text/javascript">
8
$(function(){
9
$("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
10 $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
11
$('tbody>tr').click(function() {
12 $(this)
13 .addClass('selected')
14 .siblings().removeClass('selected')
15 .end()
16 .find(':radio').attr('checked',true);
17
});
18 // 如果单选框默认情况下是选择的，则高色.
19 // $('table :radio:checked').parent().parent().addClass('selected');
20 //简化:
21 $('table :radio:checked').parents("tr").addClass('selected');
22 //再简化:
23 //$('tbody>tr:has(:checked)').addClass('selected');
24
})
25</script>
26<link href="css/style.css" rel="stylesheet" type="text/css" />
27</head>
28<body>
29<table>
30 <thead>
31 <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
32 </thead>
33 <tbody>
34 <tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
35 <tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
36 <tr><td><input type="radio" name="choice" value="" checked /></td><td>王五</td><td>男</td><td>浙江宁波</td></tr>
37 <tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
38 <tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
39 <tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
40 </tbody>
41</table>
42</body>
43</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>单选框控制表格行高亮</title>6
<script type="text/javascript" src="jquery-1.3.1.js"></script>7
<script type="text/javascript">8
$(function(){
$(function()
9
$("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式10
$("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式11
$('tbody>tr').click(function() {
12
$(this)13
.addClass('selected')14
.siblings().removeClass('selected')15
.end()16
.find(':radio').attr('checked',true);17
});18
// 如果单选框默认情况下是选择的，则高色.19
// $('table :radio:checked').parent().parent().addClass('selected');20
//简化:21
$('table :radio:checked').parents("tr").addClass('selected');22
//再简化:23
//$('tbody>tr:has(:checked)').addClass('selected');24
})25
</script>26
<link href="css/style.css" rel="stylesheet" type="text/css" />27
</head>28
<body>29
<table>30
<thead>31
<tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>32
</thead>33
<tbody>34
<tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>35
<tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>36
<tr><td><input type="radio" name="choice" value="" checked /></td><td>王五</td><td>男</td><td>浙江宁波</td></tr>37
<tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>38
<tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>39
<tr><td><input type="radio" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>40
</tbody>41
</table>42
</body>43
</html>