突出鼠標懸停表

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. 的想法是，一旦我mousehover一行整個<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'); 
}); 

我希望它能幫助