Geek Answers Handbook

Table row highlighting

I have a dynamically built table that ends with the code below (with examples):

<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 a line that was dependent on the CSS used below:

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

For some reason, this will change the background of what will be the " <td> " element, for example, just highlight Value1, Value2 or Value3, and not the entire line.

I 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 behavior as it seems to work for everyone else in every other example I have seen.

It is worth noting: the table is built from a complex system that basically executes an AJAX request that executes a PHP database query, takes values, issues them to a JSON array, passes them back to JS, parses the array again as JSON, goes through a loop and creates a table, and then displays it. Can JS have a problem?

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

+5
source share
3 answers

One solution is to use hover over the children of td when hovering over the 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>
+5
source

This works (from your question):

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

but why does nothing happen when you point?

because this rule is overwritten by the inline style: style="background: #FFF;"

Hint: NEVER write inline style (unless you really need it)

if you remove style="background: #FFF;" everything will be fine.

Working example:

 .clickable { background-color: #FFF; } .clickable:hover { 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"> <td class="tableContent">Value1</td> <td class="tableContent">Value2</td> <td class="tableContent">Value3</td> </tr> <tr class="clickable row_1" onclick="selectPatient(10002);" id="10002"> <td class="tableContent">Value1</td> <td class="tableContent">Value2</td> <td class="tableContent">Value3</td> </tr> </tbody> </table>

Edit:

For more information about which CSS rule will take precedence over others, see this MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

+1
source

You cannot color table rows. Then colorize the table cells (th and td) using the direct child selector (>).

Edit: Apollo (below) is right: Of course, you can draw the rows of the table, but if you want to color the row by hovering, you need it (just like the answer that was given earlier):

 tr:hover > td, tr:hover > th { background-color:#ccc; }
-1
source

More articles:


All Articles