突出顯示鼠標懸停表上的整行

Question

我有這樣的HTML表（由工具自行生成）：

1. 我在使用Jquery突出顯示整個行時遇到麻煩
2. 我試圖實現如果我單擊一個單元格需要突出顯示，而我移到另一單元格則不需要突出顯示。

下面是我的表，但是它實際上以td開頭，因為它在其他表元素的一部分/內部：

<td class="PTChildPivotTable">
<table tabindex="0" id="saw_437_c" cellspacing="0">
<tbody>
<tr>
<td class="TTHC OOLT" id="id1" style="font-family:Arial;font-size:16px;font-style:italic;font-weight:normal;">XYZ</td>
<td class="TTHC PTLC OOLT" id="id2" style="font-family:Arial-Italic;font-size:16px;font-style:normal;font-weight:normal;">PQR</td>
</tr>
<tr>
<td class="TTHC OOLT" id="id3" style="font-family:Arial;font-size:16px;font-style:italic;font-weight:normal;">XYZ2</td>
<td class="TTHC PTLC OOLT" id="id4" style="font-family:Arial-Italic;font-size:16px;font-style:normal;font-weight:normal;">PQR2</td>
</tr>
</tbody></table>
</td>

我正在嘗試下面的Jquery代碼，並且在懸停時確實突出顯示了一行的一個列而不是整個行：

  <style style="text/css">
        /* Define the hover highlight color for the table row */
        .PTChildPivotTable td:hover {
              background-color: #ffff99;
        }

      .PTChildPivotTable tr:hover {
              background-color: #ff0000;
        }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

 $("td").on("click", function() {
         $( this ).css({
          "background-color": "#0093e0",
          "border": "10px"
        });
        });

    </script>

1. 這個想法是，一旦我將鼠標懸停在一行上，整個<tr>都應突出顯示，這是2個TD值，如XYZ，PQR。 當我將鼠標懸停到下一行XYZ2時，需要突出顯示PQR2。 在我的代碼中，一次只能突出顯示一個值。
2. 第二個要求是，如果我單擊XYZ，則其背景色需要為藍色（＃0093e0）。 當我單擊PQR時，以前的XYZ必須為白色，但PQR需要為藍色，並且其他單元格的行為相同。

Answer 1

這是你想要的嗎？

CSS

.PTChildPivotTable tr:hover {
  background-color: #ff0000 !important;
}

.PTChildPivotTable td.clicked {
  background-color: #0093e0 !important;
  border: 10px !important;
}

JQUERY

$(".PTChildPivotTable td").on("click", function() {
    $(".PTChildPivotTable td").removeClass('clicked')
    $(this).toggleClass('clicked');
});

在這里你有一個小提琴https://fiddle.jshell.net/rigobauer/8bp2xokc/

您沒有提及它，但我想您將需要能夠取消選擇突出顯示的td再次單擊它。 否則，您總是要選擇一個單元格。 如果是這種情況，只需稍微更改一下jQuery即可。

$(".PTChildPivotTable td").on("click", function() {
    $(".PTChildPivotTable td").not(this).removeClass('clicked');
    $(this).toggleClass('clicked');
});

希望對您有所幫助