<!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. Javascript学习之Math对象详解

    1.定义 Math 是一个内置对象, 为数学常量和数学函数提供了属性和方法.  Math 不是一个函数对象 Math 不是一个构造器.  Math 的所有属性和方法都是静态的 2.属性 Math.E ...

  2. 我所认为的KVC和KVO

    引子:    ​   为什么要写这个,只是突然一个念头闪现,说一下本人目前理解.KVC:    ​   Key-value coding,它是一种使用字符串标识符,间接访问对象属性的机制.但是关就这一 ...

  3. codeforces B. Fox and Cross 解题报告

    题目链接:http://codeforces.com/problemset/problem/389/B 题目意思:给出一个由n行n列组成的board,其中'#'表示的一片地方恰好能画满十字架,画满的意 ...

  4. C#评分小系统练习

    一个经理类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...

  5. 关于“C++语言程序设计”书的一个类

    class book{    char* title;    int num_pages;    int cur_page;public:    book(const char* theTitle, ...

  6. AtrousConvolution和dilated convolution

    唉,真烦哪些炒概念的,把整个世界都给弄乱了. 这里说一下dilated convolution和atrous convolution. 这两种是一样的,至少keras源码中是一样的.在keras中调用 ...

  7. Asterisk 拨号方案中截取字符串

    在dialplan中要截取字符串可用如下几种方式: 1.转到agi中由php进行处理,这种方法比较简单,在这里不再缀述 2.在dialplan中利用内置的方法进行截取 如 [test] exten = ...

  8. DNS多出口分析

    DNS多出口分问题现象:当dns解析出的ip非域名的本地覆盖组,则怀疑是DNS多出口或者DNS劫持.接下来判断该ip是否为网宿ip,如果不是,则是劫持问题,走劫持流程进行反馈.如果是网宿ip,则用以下 ...

  9. CTSC2012 熟悉的文章

    传送门 首先很容易想到对于所有的模式串建出广义后缀自动机,之后对于我们每一个要检查的文本串,先在SAM上跑,计算出来每一个位置能匹配到的最远的位置是多少.(就是当前点减去匹配长度) 之后--考虑DP- ...

  10. C++模板之可变模板参数

    可变模板参数---- C++11新特性 可变模板参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数 由于可变模 ...