Question

我有这样的HTML表格（由工具自行生成）：

我无法使用Jquery
我试图实现如果我点击一个需要突出显示的单元格，我移动到其他单元格，它需要不突出显示。

下面是我的表，但它实际上以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>

这个想法是，一旦我鼠标移动一行，整个<tr>应该突出显示，这是2个TD值，如XYZ，PQR。当我将鼠标悬停在下一行XYZ2时，需要突出显示PQR2。在我的代码中，一次只能突出显示一个值。
第二个要求是，如果我点击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');
});

我希望它有所帮助

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

1 个答案: