<!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就该这么学--命令集合5（用户与组管理命令）

    1.useradd命令用于创建新用户:(useradd [选项] 用户名) 附录: -d 指定用户的家目录 -D 展示默认值 -e 账号有效截止日期,格式:YYY-MM-DD -g 指定一个初始用户组 ...

  2. zoj 2313 Chinese Girls' Amusement 解题报告

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1313 题目意思:有 N 个人(编号依次为1~N)围成一个圆圈,要求求 ...

  3. AtrousConvolution和dilated convolution

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

  4. Ubuntu 16.04上安装SkyEye及测试

    说明一下,在Ubuntu 16.04上安装SkyEye方法不是原创,是来自互联网,仅供学习参考. 一.检查支持软件包 gcc,make,vim(optional),ssh,subversionbinu ...

  5. 安装asterisk以及asterisk-gui

           asterisk的安装在ubuntu上自我感觉还是很方便的,虽然也会遇到一些小的问题.下面是本人遇到的   一些问题和解决方法.     1>在ubuntu10.04上安装aste ...

  6. <VS>MFC程序显示命令行窗口

    编写MFC程序时,想打印出调试信息,使用cout后,发现程序并没有像想象中那样自动弹出命令行窗口,要输出的信息也没地方去查看.百度后知道要手动调出命令行窗口,才可以看到输出的信息.   百度上介绍了两 ...

  7. Java笔记（六）

    IO流: 字符流和字节流: 字符流两个基类: InputStream OutputStream 字节流两个基类: Reader Writer FileWriter: import java.io.Fi ...

  8. 51nod 1327 棋盘游戏——延迟决策的dp

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1327 因为一列填1个或0个(或0个!!!),而一行不知填多少个,所 ...

  9. python -m json.tool 中文乱码 Format JSON with python

    现在以 json 为数据传输格式的 RESTful 接口非常流行.为调试这样的接口,一个常用的办法是使用 curl 命令: curl http://somehost.com/some-restful- ...

  10. Excel的poi缓存问题

    Excel的poi缓存问题 背景: 最近工作需要,需要完成生成新的Excel,然后从Excel中读取包含公式的文本内容. 问题: 当程序中修改公式对应的单元格数据变化时,公式获取的值仍然还是原来的值, ...