<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link rel="stylesheet" href="tb-pure.css" />

         <style>

             .fixed-tb{

                 width: 400px;

                 height: 200px;

                 margin: 0 auto;

                 overflow-y: auto;

             }

         </style>

     </head>

     <body>

         <div class="fixed-tb">

             <table id="web-table" class="tb-pure">

                 <tr>

                     <th>魔追大幅</th>

                     <th>魔追大幅</th>

                     <th>魔追大幅</th>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

                 <tr>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                     <td>魔追大幅</td>

                 </tr>

             </table>

         </div>

         <script type="text/javascript">

             function hasClass(obj, cls) {

                 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

             }  

             function addClass(obj, cls) {

                 if (!hasClass(obj, cls)) obj.className += " " + cls;

             }  

             function removeClass(obj, cls) {

                 if (hasClass(obj, cls)) {

                     var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

                     obj.className = obj.className.replace(reg, ' ');

                 }

             }  

             function toggleClass(obj,cls){

                 if(hasClass(obj,cls)){

                     removeClass(obj, cls);

                 }else{

                     addClass(obj, cls);

                 }

             }

             var myTrs = document.getElementsByTagName("tr");

             for(var i = 0; i < myTrs.length; ++i){

                 myTrs[i].onclick = function(){

                     toggleClass(this, "selected");

                 }

             }

         </script>

     </body>

 </html>

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

             function hasClass(obj, cls) {

                 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

             }  

             function addClass(obj, cls) {

                 if (!hasClass(obj, cls)) obj.className += " " + cls;

             }  

             function removeClass(obj, cls) {

                 if (hasClass(obj, cls)) {

                     var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

                     obj.className = obj.className.replace(reg, ' ');

                 }

             }  

             function toggleClass(obj,cls){

                 if(hasClass(obj,cls)){

                     removeClass(obj, cls);

                 }else{

                     addClass(obj, cls);

                 }

             }

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

JS实现 类的 1.判断 2.添加 3.删除 4切换的更多相关文章

  1. js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...

  2. JS框架avalon简单例子 行编辑 添加 修改 删除 验证

    为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...

  3. 多iframe使用tab标签方式添加、删除、切换的处理实例

    紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...

  4. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  5. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  6. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  7. 判断js数据类型和clone

    判断返回js数据类型 function judgeType(arg){//判断返回js数据类型 return Object.prototype.toString.call(arg).slice(8,- ...

  8. JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）

    var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...

  9. jQuery——类的添加与删除

    添加类:addClass 删除类:removeClass 判断类是否存在:hasClass <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. hdu1427 速算24点

    </pre><pre> //#pragma comment(linker, "/STACK:102400000,102400000") //HEAD #in ...

  2. Linux-正则表达式学习（精）

    正则表达式30分钟入门教程 来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混 ...

  3. linux CentOS7.2配置LNMP

    转自http://www.centoscn.com/CentosServer/www/2014/0904/3673.html 准备篇: CentOS 7.0系统安装配置图解教程 http://www. ...

  4. Windows窗口程序从创建到关闭产生的消息

    Windows是消息驱动的,理解消息机制及消息循环是特别重要.知道在什么情况下产生什么消息会让我们对程序有更好的控制.Windows给应用程序发消息,有些会加入应用程序的消息队列,也是就是队列消息.有 ...

  5. DHCP request error:Timed out waiting for dhcpcd to start【转】

    本文转载自:http://blog.csdn.net/zvivi521/article/details/9166899 [init.svc.dhcpcd_eth0]: [stopped] I/Serv ...

  6. POJ 1611 The Suspects (并查集+数组记录子孙个数 )

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 24134   Accepted: 11787 De ...

  7. hdu1078 FatMouse and Cheese —— 记忆化搜索

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 代码1: #include<stdio.h>//hdu 1078 记忆化搜索 #in ...

  8. 自动化测试框架selenium+java+TestNG——配置篇

    最近来总结下自动化测试 selenium的一些常用框架测试搭配,由简入繁,最简单的就是selenium+java+TestNG了,因为我用的是java,就只是总结下java了. TestNG在线安装: ...

  9. 2013 gzhu 校赛

    题目描述: Integer in C++ Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 128000/64000 KB (Java/Othe ...

  10. java-线程(一）

    1.进程与线程的区别 多个进程的内部数据和状态都是完全独立的,而多个线程是共享一块内存空间和一组系统资源,有可能互相影响.多线程程序比多进程程序需要更少的管理费用.进程是重量级的任务,需要分配他们的单 ...