javascript - 突出显示表行

Question

我有一个动态构建的表，它以下面的代码结尾(带有示例值):

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

我正在尝试使用以下 CSS 突出显示悬停的行:

.clickable :hover {
        background-color: #CCC;
    }

出于某种原因，这会更改“<td>”元素的背景，例如，将仅突出显示 Value1、Value2 或 Value3 而不是整行。

我已经尝试(无济于事)使用:

.clickable tr:hover {
    background-color: #CCC;
}
.clickable:hover {
    background-color: #CCC;
}
.tr:hover {
    background-color: #CCC;
}
.tr :hover {
    background-color: #CCC;
}

我发现这种不寻常的行为，因为它似乎对我见过的所有其他示例都适用。

值得一提:该表是从一个复杂的系统构建的，它基本上执行一个 AJAX 请求，该请求执行一个 PHP 数据库查询，获取值，将它们放入 JSON 数组，然后将它们传回到 JS，将数组重新解析为 JSON，循环并创建表，然后将其输出。 JS 会导致问题吗？

类名“.clickable”、“row_#”(其中#是一个数字)和表行的 ID 需要保留，因为它们会在未来的函数中使用，并为我提供一种识别每一行的方法个别地。

Answer 1

一种解决方案是在悬停在父元素 tr 上时将悬停应用于子元素 td:

.clickable:hover td {
  background-color: #CCC;
}

<table id="patientTable" class="display" cellspacing="0" width="100%">
  <thead id="TableHeader">
    <tr>
      <th>Value1</th>
      <th>Value2</th>
      <th>Value3</th>
    </tr>
  </thead>
  <tbody id="tableContent">
    <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
      <td class="tableContent">Value1</td>
      <td class="tableContent">Value2</td>
      <td class="tableContent">Value3</td>
    </tr>
  </tbody>
</table>