突出显示鼠标悬停表上的整行

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');
});

希望对你有帮助