Question

我有一个要求。我有以下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）如果我们按任何其他单元格，则最后一个单元格应该变为其先前的颜色。意思是，我们已经按下TH = 01的单元格，其原始颜色是ORCHID。所以它会变灰。现在，如果我们按下说TH = 04单元格，那个单元格背景颜色将是灰色但TH = 1单元格颜色应该是ORCHID。目前它正在变红。

我需要做些什么改变？

提前致谢。

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

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

1 个答案: