javascript - 无法设置点击另一个单元格的 TD 的原始颜色-6ren

javascript - 无法设置点击另一个单元格的 TD 的原始颜色

转载作者：太空宇宙更新时间：2023-11-04 09:40:26

25

4

我有下面的html

JS fiddle : http://jsfiddle.net/klbaiju/97oku7mb/3/

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {

            $('body').on('click', '.anchor3', function () {
                var bcolor = $(this).parent().css("background-color");               
                $("a.anchor3:contains('B')").each(function () {
                    var pcolor = $(this).parent().css("background-color");                   
                    if (pcolor != "rgb(218, 112, 214)") {
                        $(this).parent().css("background-color", "red");
                    }
                    else {

                        $(this).parent().css("background-color", "Orchid");
                    }
                });
                $("a.anchor3:contains('b')").parent().css('background-color', 'LightGrey');
                $(this).parent().css('background-color', 'Grey');



            });
        });
});

</script>


</head>

<body>
  <table id="GridView3" cellspacing="0" border="1" border-collapse:collapse; rules="All" ;>
<tbody>
<tr>
<th>ID </th>
<th>01 </th>
<th>02 </th>
<th>03 </th>
<th>04 </th>
<th>05 </th>
<th>06 </th>
<th>07 </th>
</tr>
  <tr>
    <td>101</td>
    <td style="background-color: Orchid;"><a  class="anchor3" href="#">B</a></td>
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td>
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td>
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td>
    <td style="background-color: Orchid;"><a  class="anchor3" href="#">B</a></td>
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td>
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td>
  </tr>
</tbody>
</table>

</body>

</html>

有两个要求:

a) 如果我们按下任何单元格，它的颜色将变为灰色(有效)

b) 如果我们按下任何其他单元格，最后一个单元格应更改为其之前的颜色。意思是，假设我们按下了原始颜色为 ORCHID 的 TH = 01 单元格。所以它会是灰色的。现在，如果我们按下说 TH =04 单元格，该单元格背景颜色将为灰色，但 TH = 1 单元格颜色应为 ORCHID。目前它是红色的。

我需要做什么改变？

最佳答案

您可以在呈现页面时向单元格添加颜色类，而不是将背景颜色添加为内联样式，然后稍后只需切换灰色类。

$(document).ready(function () {
     $('body').on('click', '.anchor3', function () {  
           $("a.anchor3:contains('B')").parent().removeClass('grey') ;
           $(this).parent().addClass('grey');
        });
        });

.orchid {
 background-color:  rgb(218, 112, 214);
}
.red {
 background-color:  rgb(255, 0, 0);
}
.grey {
 background-color:  rgb(128, 128, 128);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="GridView3" cellspacing="0" border="1" border-collapse:collapse; rules="All" ;>
<tbody>
<tr>
<th>ID </th>
<th>01 </th>
<th>02 </th>
<th>03 </th>
<th>04 </th>
<th>05 </th>
<th>06 </th>
<th>07 </th>
</tr>
<tr><td>101</td><td class="orchid">
<a  class="anchor3" href="#">B</a>
</td><td class="red">
<a class="anchor3" href="#">B </a>
</td><td class="red">
<a class="anchor3" href="#">B </a>
</td><td class="red">
<a class="anchor3" href="#">B </a>
</td><td  class="orchid">
<a  class="anchor3" href="#">B</a>
</td><td class="red">
<a class="anchor3" href="#">B </a>
</td><td class="red">
<a class="anchor3" href="#">B </a>
</td></tr>
</tbody>
</table>

关于javascript - 无法设置点击另一个单元格的 TD 的原始颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39970331/

25

4

0

文章推荐： python - 使用 DateTimeIndex 计算 Dataframe 中字符串的出现次数

文章推荐： java - 发送蓝色 : sending mail with attachement to sendinblue

文章推荐： java - 如何杀死在服务器上运行的进程

文章推荐： javascript - 无法重复点击事件

java - 原始 + ""与 Wrapper.toString(原始)
当需要将原始类型转换为字符串时，例如传递给需要字符串的方法时，基本上有两种选择。以int为例，给出: int i; 我们可以执行以下操作之一: someStringMethod(Integer.to
r - Bootstrapping : Error in statistic(data, 原始，...):未使用的参数(原始)
我有一个位置估计数据库，并且想要计算每月的内核利用率分布。我可以使用 R 中的 adehabitat 包来完成此操作，但我想使用引导数据库中的样本来估计这些值的 95% 置信区间。今天我一直在尝试引导
PowerShell 原始 FTP
我希望使用 FTP 编写大型机作业流。为此，我可以通过 FTP 连接到大型机并运行以下命令: QUOTE TYPE E QUOTE SITE FILETYPE=JES PUT myjob.jcl 那么
WPF:将画笔恢复为默认/原始
我是 WPF 的新手。目前，我正在为名为“LabeledTextbox”的表单元素制作一个用户控件，其中包含一个标签、一个文本框和一个用于错误消息的文本 block 。当使用代码添加错误消息时，我
SignalR(原始)不向客户端发送消息
我们正在使用 SignalR(原始版本，而不是 Core 版本)并注意到一些无法解释的行为。我们的情况如下: 我们有一个通过 GenericCommand() 方法接受命令的集线器(见下文)。这些命
Python请求 - 打印整个http请求(原始)？
使用 requests module 时，有没有办法打印原始 HTTP 请求？我不只想要标题，我想要请求行、标题和内容打印输出。是否可以看到最终由 HTTP 请求构造的内容？最佳答案 Since
你需要知道的三种VMware磁盘类型：原始、厚和精简
与直接访问现有本地磁盘或分区的物理磁盘相比，虚拟磁盘为文件存储提供更好的可移植性和效率。VMware有三种不同的磁盘类型：原始磁盘、厚磁盘和精简磁盘，它们各自分配不同的存储空间。 VMware
unity3d - 预制件(原始)和变体预制件有什么区别？
我有一个用一些颜色着色器等创建的门。前段时间我拖着门，它问我该怎么办时，我选择了变体。但现在我决定选择创建原始预制件和门颜色，或者着色器变成粉红色。这是资源中原始预制件和变体的屏幕截图。粉红色的
forms - Symfony2 form_label 原始
我想呈现原始翻译，所以我决定在 Twig 模板中使用“原始”选项。但它不起作用。例子: {{ form_label(form.sfGuardUserProfile.roules_acceptance)
sqlite - 文字(原始)值作为sqlite中的外键
是否可以在sqlite中制作类似的东西？ FOREIGN KEY(TypeCode, 'ARawValue', IdServeur) REFERENCES OTHERTABLE(TypeCode, T
geolocation - 原始 geoip 数据从何而来？
这个问题是一个更具体问题的一般版本 asked here .但是，这些答案无法使用。问题: geoIP数据的原始来源是什么？许多网站会告诉我我的 IP 在哪里，但它们似乎都在使用来自不到 5 家公
docker - Openshift/原始-基于Wildfly创建图像
对于Openshift:如何基于Wildfly创建docker镜像？这是使用的Dockerfile: FROM openshift/wildfly-101-centos7 # Install exa
Groovy 原始 double 算术
结果是 127 double middle = 255 / 2 虽然这产生了 127.5 Double middle = 255 / 2 同时这也会产生 127.5 double middle = (
delphi - 以编程方式逐个像素地交换小位图(原始)的颜色
在此处下载带有已编译可执行文件的源代码(大小:161 KB(165,230 字节)):http://www.eyeClaxton.com/download/delphi/ColorSwap.zip 原
string - 有没有办法在lua(原始)中定义自动转义字符串？
以下几行是我需要在 lua 中使用的任意正则表达式。 ['\";=] !^(?:(?:[a-z]{3,10}\s+(?:\w{3,7}?://[\w\-\./]*(?::\d+)?)?/[^?#]*(
geolocation - 原始 geoip 数据从何而来？
这个问题是一个更具体问题的一般版本 asked here .但是，这些答案无法使用。问题: geoIP数据的原始来源是什么？许多网站会告诉我我的 IP 在哪里，但它们似乎都在使用来自不到 5 家公
api - 原始.M数组字符串？以相同的结构响应http请求
我正在使用GoLang做服务器api，试图管理和回答所发出的请求。使用net/http和github.com/gorilla/mux。收到请求时，我使用以下结构创建响应: type Response
c++ - 原始 static_vector 实现中可能未定义的行为
tl; dr:我认为我的 static_vector 有未定义的行为，但我找不到它。这个问题是在 Microsoft Visual C++ 17 上。我有这个简单且未完成的 static_vecto
awk - 原始 awk 源代码的旧版本存档？
我试图找到原始 Awk (a/k/a One True Awk) 源代码的“历史”版本。我找到了 Kernighan's occasionally-updated site ，它似乎总是链接到最新版本
Python 原始 IPv6 套接字错误
我在 python 中使用原始 IPv6 套接字时遇到一些问题。我通过以下方式连接: if self._socket != None: # Close out old sock

首页

博学

6Ren·AI

商城

javascript - 无法设置点击另一个单元格的 TD 的原始颜色