<!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. Linux struct itimerval使用方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hbuxiaofei/article/details/35569229 先看一段代码 #include ...

  2. cc、gcc、g++区别

    gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...

  3. 谷歌浏览器使用SelectorGadget和Xpath Helper获取xpath和css path

    在上篇文章里,介绍了如何在火狐浏览器中获取网页元素的xpath和css path. 这篇文章将介绍,在谷歌浏览器中使用SelectorGadget和Xpath Helper实现同样功能. 这两个谷歌浏 ...

  4. Appium——连接真机，adb devices获取不到设备号

    连接真机后,使用 adb devices获取不到设备号. 1.检查usb接口是否正常,是否正常链接到电脑 2.手机开发者模式是否开启,usb调试是否开启 3.检查驱动是否正常 4.如果驱动显示黄叹号, ...

  5. linux /usr /var /etc 目录

    /usr 目录是应用程序主要存放的目录.该目录中的二进制文件对系统启动和维护并非必要,因此整个 /usr 目录结构常会被存放到另一个分离的文件系统中.因为其(通常)具有很大的容量,/usr 有其自己的 ...

  6. H264 各种profile

    关键字:H264 ,base profile, main profile, extend profile, high profile. 提到High Profile H.264解码许多人并不了解,那么 ...

  7. HTML页面下雪特效

    1. [代码][HTML]代码     <a  href="javascript:void(function(){var d = document,a = 'setAttribute' ...

  8. 如何修改Windows的默认安装路径

    运行中输入regedit打开注册表编辑器 展开注册表“HKEY_LOCAL_MACHINE\Software\Microsoft\ Windows\ CurrentVersion”分支, 在窗口的右侧 ...

  9. DB2删除表分区

    近日,由于部门数据库读库空间过小,提出删除掉两个月之前日志表的分区(数据库分区是按时间月分区),记述如下: 上网搜索资料发现删除表分区大概分这么几步: 1.查询需要删除掉的分区: select t.D ...

  10. Spring cloud基础模块学习

    1.微服务架构构成 单体架构(通过应用集群和数据库集群来提高性能,多余模块存在浪费) 垂直架构(新的功能模块通过新项目来实现,数据库之间存在交叉关联.存在数据冗余,和单体架构一样通过扩展集群结点,成本 ...