無法設置點擊另一個單元格的 TD 的原始顏色

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) 如果我們按下任何其他單元格，最后一個單元格應該變成以前的顏色。 意思是，假設我們按下了原始顏色為 ORCHID 的 TH = 01 單元格。 所以它會是灰色的。 現在，如果我們按下 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 個解決方案

解決方案1
1 已采納 2016-10-11 04:34:07

無法設置點擊另一個單元格的 TD 的原始顏色

問題描述

1 個解決方案

解決方案1 1 已采納 2016-10-11 04:34:07

解決方案1
1 已采納 2016-10-11 04:34:07