突出表行

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

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

.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>