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

Could not be able to set the original color of TD which clicking on another cell

本文关键字：TD 设置 原始 颜色 单元格 另一个      更新时间：2023-09-26

我有下面的html

JS小提琴: 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单元格的颜色应该是兰花。目前是红色的

我需要做什么改变?

您可以在渲染页面时为单元格添加颜色类，然后切换灰色类，而不是添加背景色作为内联样式。

$(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>

相关文章：