我用的是渲染页面，将自定义的值作为一个表示符判断当前状态

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*滑动变色*/

            .min table tr:hover{

                    background-color: #DFF0D8;

            }

        </style>

    </head>

    <body>

        <div class="min">

            <table>

                <tr id="row1" onclick="clicks('row1')" val="0">

                    <td>0.0</td>

                    <td>1.1</td>

                    <td>2.2</td>

                </tr>

                <tr id="row2" onclick="clicks('row2')" val="0">

                    <td>0.0</td>

                    <td>1.1</td>

                    <td>2.2</td>

                </tr>

                <tr id="row3" onclick="clicks('row3')" val="0">

                    <td>0.0</td>

                    <td>1.1</td>

                    <td>2.2</td>

                </tr>

            </table>

        </div>

        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>

        <script>

            function clicks(row){

                //使用val判断状态

                var IsCheck = $("#" + row).attr("val");

                if (IsCheck == "1") {

              $("#" + row).css("background-color", "");

              $("#" + row).attr("val", "0");

           } else {

              $("#" + row).css("background-color", "#00ccff");

              $("#" + row).attr("val", "1");

           }

            }

        </script>

    </body>

</html>

Js 实现 多个tr 点击变色，再点击还原的更多相关文章

  1. input radio点击选中再点击取消

    这里主要说一下这个jquery中的data()方法,个人感觉这个方法平时挺少用到的,所以说一说,按照官方的解释就是 向元素附加数据,然后取回该数据; 嗯,是的,就是这么简单. 那这里说一下这个方法的使 ...

  2. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  3. [转]Cordova Android 返回键拦截（backbutton）和退出（再点击一次跳出）

    本文转自:https://blog.csdn.net/aierJun/article/details/53944061 在Android原生webview里重写onBackPressed()就可以.@ ...

  4. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  5. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  7. android 自定义控件——（五）按钮点击变色

    ----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...

  8. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  9. js遍历添加栏目类添加css 再点击其它删除css

    //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...

  10. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

随机推荐

  1. C基础知识(7)：字符串

    在C语言中,字符串实际上是使用null字符'\0' 终止的一维字符数组.因此,一个以null结尾的字符串,包含了组成字符串的字符. C编译器会在初始化数组时,自动把'\0'放在字符串的末尾.所以不需要 ...

  2. ubuntu中配置jdk1.8

    方法/步骤   1 首先,百度搜索jdk,选择第一个,网站是Oracle Jdk.点击进去 步骤阅读 2 点击Download,到官网下载linux版本的jdk.选择自己对应的操作系统及32或64位版 ...

  3. 使用robotframework做接口测试三——保持登录状态

    调用登录接口登录了,其他的接口怎么保持登录状态呢?  首先来看一看,web端或者说客户端是怎么样用cookie/token等保持登录状态的.一般来说,cookie都会在登录接口由服务端返回,而且会是在 ...

  4. IntelliJ IDEA 2018 for Mac使用技巧

    IntelliJ IDEA 2018 for Mac是一个综合性的Java编程环境,被许多开发人员和行业专家誉为市场上最好的IDE,它提供了一系列最实用的的工具组合:智能编码辅助和自动控制,支持J2E ...

  5. monkey详解

    Monkey是Android系统自带的一个命令行工具,用户主要是通过adb命令来启动Monkey,Monkey在运行时,会根据命令行参数的配置,生成伪随机事件流,并在Android设备上执行对应的测试 ...

  6. 配置传统vlan间路由

    S1#SH RUN spanning-tree mode pvst ! interface FastEthernet0/1 switchport access vlan 10 switchport m ...

  7. python copy与deepcopy (拷贝与深拷贝)

    copy与deepcopy python 中的copy与deepcopy是内存数据的操作,但是两个函数有一定的区别. 1.copy import copy list = [1, [4, 5, 6], ...

  8. SpringMVC必备知识点汇总

    1.参数接收 1.1 数组 1.2 文件上传 1.2.1 单个文件上传 1.2.2 多个文件上传 1.2.3 文件上传时,携带其他数据 2.参数校验 参数校验:https://www.cnblogs. ...

  9. OI模板のpoke流[大型考试复习必备/kl]

    数论 快速乘: ll qmul(ll x,ll y,ll mod) { ll ans=0; while(y) { if(y&1) (ans+=x)%=mod; y>>=1; (x+ ...

  10. reduce的使用

    reduce的使用:https://blog.csdn.net/xiasohuai/article/details/82152432