1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="tb-pure.css" />
7 <style>
8 .fixed-tb{
9 width: 400px;
10 height: 200px;
11 margin: 0 auto;
12 overflow-y: auto;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="fixed-tb">
18 <table id="web-table" class="tb-pure">
19 <tr>
20 <th>魔追大幅</th>
21 <th>魔追大幅</th>
22 <th>魔追大幅</th>
23 </tr>
24 <tr>
25 <td>魔追大幅</td>
26 <td>魔追大幅</td>
27 <td>魔追大幅</td>
28 </tr>
29 <tr>
30 <td>魔追大幅</td>
31 <td>魔追大幅</td>
32 <td>魔追大幅</td>
33 </tr>
34 <tr>
35 <td>魔追大幅</td>
36 <td>魔追大幅</td>
37 <td>魔追大幅</td>
38 </tr>
39 <tr>
40 <td>魔追大幅</td>
41 <td>魔追大幅</td>
42 <td>魔追大幅</td>
43 </tr>
44 <tr>
45 <td>魔追大幅</td>
46 <td>魔追大幅</td>
47 <td>魔追大幅</td>
48 </tr>
49 <tr>
50 <td>魔追大幅</td>
51 <td>魔追大幅</td>
52 <td>魔追大幅</td>
53 </tr>
54 </table>
55 </div>
56 <script type="text/javascript">
57 function hasClass(obj, cls) {
58 return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
59 }
60
61 function addClass(obj, cls) {
62 if (!hasClass(obj, cls)) obj.className += " " + cls;
63 }
64
65 function removeClass(obj, cls) {
66 if (hasClass(obj, cls)) {
67 var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
68 obj.className = obj.className.replace(reg, ' ');
69 }
70 }
71
72 function toggleClass(obj,cls){
73 if(hasClass(obj,cls)){
74 removeClass(obj, cls);
75 }else{
76 addClass(obj, cls);
77 }
78 }
79 var myTrs = document.getElementsByTagName("tr");
80 for(var i = 0; i < myTrs.length; ++i){
81 myTrs[i].onclick = function(){
82 toggleClass(this, "selected");
83 }
84 }
85 </script>
86 </body>
87 </html>
