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>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43
