Js 实现 多个tr 点击变色,再点击还原

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

<!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>

原文地址:https://www.cnblogs.com/hkzw/p/11543784.html

时间: 2024-10-10 23:12:51

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

点击变色

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.List" %> <%@ include file="/htss/commonJsp/commonHeadJsp.jsp"%> <%@ pa

jQuery点击变色的效果

jQuery 点击变色效果的代码实现,点击后文字所在方框的背景会变色,至于变成什么颜色,随你了,本代码的重点是效果的实现,并不局限于细节. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>接触角测定仪</title> </head> <style type="text/css"> #t

Android实现按钮点击效果(第一次点击变色,第二次恢复)

1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="点击变色" android:background="@drawable/btn_st" android:gravity="center&

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

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置             var newTd1 = newTr.insertCell();             newTd1.

百度地图多边形点击变色

在应用百度地图多边形时会出现点击多边形名称对应多边形变色 使用如下方法 定义map var pologyMap = new Map(); var curPology; 画多边形时 将多边形放入map pologyMap.set(this.id, bmap.polygon); 点击名称时获取对应多边形设置颜色,之前变色的多边形 颜色还原 var polygon = pologyMap.get(parseInt(areaid)); if (curPology != null) { curPology

jquery点击添加样式,再点击取出样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击添加边框,再点击去掉边框</title> <style> ul li{ float:left; list-style:none; width:50px; height:30px; border:1px solid #E3E3E3; line-height:30px; text-al

问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。

例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> <div id="ycbc" style="display:none">隐藏的内容</div> 解决方法一:javascript 利用onclick事件调用f('ycbc')函数,参数为隐藏的内容div的id,在函数加入钮时出现,再点击时隐藏代

在自定义的tabbar 中间按钮 点击出现一个view 再点击view返回

入职第三天 遇到一个小问题 记下来 问题是自定义的tabbar 中间一个加号按钮 点击从下弹出一个view,再点击 view返回 首先再tabbar的view .h添加一个代理方法 在.m中 在tabbar的VC.m中实现代理方法( 我是在这里加了一个判断 反正实现了 菜鸟的做法吧,不加判断 点击回不去) 创建view的V和C 在V中 添加一个单例类 创建了view的坐标 在V.m中 创建好view的show 和dismiss 两个方法 这样大功告成了 中间还有一些细节 我也不知道怎么说 dis

【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验三:按键模块② — 点击与长点击

实验三:按键模块② - 点击与长点击 实验二我们学过按键功能模块的基础内容,其中我们知道按键功能模块有如下操作: l 电平变化检测: l 过滤抖动: l 产生有效按键. 实验三我们也会z执行同样的事情,不过却是产生不一样的有效按键: l 按下有效(点击): l 长按下有效(长点击). 图3.1 按下有效,时序示意图. 图3.2 长按下有效,时序示意图. 如图3.1所示,按下有效既是"点击",当按键被按下并且消抖完毕以后,isSClick信号就有被拉高一个时钟(Short Click).

【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验五:按键模块④ — 点击,长点击,双击

实验五:按键模块④ — 点击,长点击,双击 实验二至实验四,我们一共完成如下有效按键: l 点击(按下有效) l 点击(释放有效) l 长击(长按下有效) l 双击(连续按下有效) 然而,不管哪个实验都是只有两项“功能”的按键模块而已,如今我们要创建三项“功能”的按键模块,亦即点击(按下有效),长击,还有双击.实验继续之前,让我们先来复习一下各种有效按键. 图5.1 点击(按下有效). 如图5.1所示,所谓点击(按下有效)就是按键按下以后,isSClick信号(Single Click) 产生一