1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11. h1           { font:bold 20px/26px Arial;}  
12. table       { border:0;border-collapse:collapse;}  
13. td  { font:normal 12px/17px Arial;padding:2px;width:100px;}  
14. th          { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}  
15. tr.odd      { background:#FFF3BF;}  
16. tr.highlight    { background:#6F4DFF;}  
17. tr.selected     { background:#aaaaaa;color:#fff;}  
18.   
19.   
20.   
21.   
22.   

23. Demo1--隔行,滑动,点击 变色.

      
24.   
25.   
26.   
27.     姓名  
28.     性别  
29.     暂住地  
30.   
31.   
32.   
33.   
34.     张山  
35.     男  
36.     浙江宁波  
37.   
38.   
39.     李四  
40.     女  
41.     浙江杭州  
42.   
43.   
44.     王五  
45.     男  
46.     湖南长沙  
47.   
48.   
49.     找六  
50.     男  
51.     浙江温州                                                                                                                 
52.   
53.   
54.     Rain  
55.     男  
56.     浙江杭州  
57.   
58.   
59.     MAXMAN  
60.     女  
61.     浙江杭州  
62.   
63.   
64.   
65.   
66.   
67.   

68. Demo2--隔行,滑动,点击 变色.+  多选框选中的行 变色.

      
69.   
70.   
71.   
72.        
73. 姓名  
74.     性别  
75.     暂住地  
76.   
77.   
78.   
79.   
80.       
81.     张山  
82.     男  
83.     浙江宁波  
84.   
85.   
86.       
87.         李四  
88.     女  
89.     浙江杭州  
90.   
91.   
92.       
93.             王五  
94.     男  
95.     湖南长沙  
96.   
97.   
98.       
99.     找六  
100.     男  
101.     浙江温州     
102.   
103.   
104.       
105.         Rain  
106.     男  
107.     浙江杭州  
108.   
109.   
110.       
111.     MAXMAN  
112.     女  
113.     浙江杭州  
114.   
115.   
116.   
117.   
118.   
119.   
120.   
121.   

122. Demo3--隔行,滑动,点击 变色.+  单选框选中的行 变色.

       
123.   
124.   
125.   
126.        
127. 姓名  
128.     性别  
129.     暂住地  
130.   
131.   
132.   
133.   
134.       
135.     张山  
136.     男  
137.     浙江宁波  
138.   
139.   
140.       
141.         李四  
142.     女  
143.     浙江杭州  
144.   
145.   
146.       
147.             王五  
148.     男  
149.     湖南长沙  
150.   
151.   
152.       
153.     找六  
154.     男  
155.     浙江温州     
156.   
157.   
158.   
159.         Rain  
160.     男  
161.     浙江杭州  
162.   
163.   
164.       
165.     MAXMAN  
166.     女  
167.     浙江杭州  
168.   
169.   
170.   
171.   

知识点说明：

1.

         //添加选择色的
         //toggleClass表示为 如果存在(颜色或其他对象)就删除，如果不存在(颜色或其他对象)就添加
         $('.cssraindemo1 tbody tr').click(
     function() {$(this).toggleClass('selected');}
      ); 

2.

        //如果复选框是选中的变色
        $(".cssraindemo2 input[type='checkbox']:checked").parents("tr").addClass("selected");

3.

    找到每个div的所有同辈元素。

    $("div").siblings()

    找到每个div的所有同辈元素中带有类名为selected的元素。

    $("div").siblings(".selected")