Highlighting Table Rows

Question

I have a dynamically built table that ends up with the below code (with example values):

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

I am trying to highlight the row that is been hovered over using the below CSS:

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

For some reason, this changes the background of what would be the "<td>" element, for example, will just highlight Value1, Value2 or Value3 rather than the entire row.

I have tried (to no avail) to use:

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

I find this unusual behaviour, as it appears to work for everyone else on every other example i've seen..

Worth Mentioning: The table is build from a complex system, that basically performs an AJAX request, which performs a PHP database query, takes the values, throws them into a JSON array, passes them back to JS, re-parses the array as JSON, loops through and creates the table, then outputs it. Could the JS be causing the issue?

The class name ".clickable", "row_#" (where # is a number) and the ID for the table row need to stay, as they are used in future functions and provide me with a way to identify each row individually.

Answer 1

One solution is to apply the hover on child elements td's when hover on parent 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>