<!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. Raspberry Pi3 ~ 安装 nfs Server

    l  安装必要服务: sudo      apt-get install  portmap sudo  apt-get install  nfs-kernel-server sudo      apt ...

  2. 使用doctrine的内存耗尽解决办法

    PHP Fatal error: Allowed memory size of xxx xxx xxx bytes exhausted 无论是插入大量数据或者查询大量数据时,都可能因为数据量太大而出现 ...

  3. BZOJ 3732 Network —— 最小生成树 + 倍增LCA

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3732 Description 给你N个点的无向图 (1 <= N <= 15, ...

  4. tomcat正常启动，但是java项目没有启动原因

    右键项目,选择properties,查看该属性配置的是否正确

  5. Python下使用Psyco模块优化运行速度

    今天介绍下Psyco模块,Psyco模块可以使你的Python程序运行的像C语言一样快.都说Python语言易用易学,但性能上跟一些编译语言(如C语言)比较要差不少,这里可以用C语言和Python语言 ...

  6. DLL的远程注入技术

    DLL的远程注入技术是目前Win32病毒广泛使用的一种技术.使用这种技术的病毒体通常位于一个DLL中,在系统启动的时候,一个EXE程序会将这个DLL加载至某些系统进程(如Explorer.exe)中运 ...

  7. Azure Key Vault (3) 在Azure Windows VM里使用Key Vaule

    <Windows Azure Platform 系列文章目录> 本章我们介绍如何在Azure Windows VM里面,使用.NET使用Azure Key Vault 我们需要对Key V ...

  8. Winform中ComBox大小设置

    combox,listview等一些控件的外观会由于字体大小的改变而改变.修改字体的大小宽度自动变化

  9. JDK1.8中对hashmap的优化

    在Java编程语言中,最基本的结构就是两种,一个是数组,另外一个是模拟指针(引用),所有的数据结构都可以用这两个基本结构来构造的,HashMap也不例外.HashMap实际上是一个“链表散列”的数据结 ...

  10. set和multiset容器

    set和multiset容器的能力 set 和multiset容器的内部结构通常由平衡二叉树(balanced binary tree)来实现.当元素放入容器中时,会按照一定的排序法则自动排序,默认是 ...