JS实现类的 1.判断 2.添加 3.删除 4切换

佚名 7年前 (2019-05-08) 随笔 1618人围观抢沙发百度已收录

 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>

案例代码：表格点击选中和取消

 1             function hasClass(obj, cls) { 
 2                 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
 3             }  
 4   
 5             function addClass(obj, cls) {  
 6                 if (!hasClass(obj, cls)) obj.className += " " + cls;  
 7             }  
 8               
 9             function removeClass(obj, cls) {  
10                 if (hasClass(obj, cls)) {  
11                     var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
12                     obj.className = obj.className.replace(reg, ' ');  
13                 }  
14             }  
15               
16             function toggleClass(obj,cls){  
17                 if(hasClass(obj,cls)){  
18                     removeClass(obj, cls);  
19                 }else{  
20                     addClass(obj, cls);  
21                 }  
22             }