Question

I’m trying to highlight a row in my table when someone clicks on it. Here is my table:

<table class="pretty">
    <tr>
        <td onclick="DoNav('<?php echo $url; ?>');">Name</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Time</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Size</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Length<td>
        <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion" /></td>
    </tr>
...

I’ve tried some things based on this post:

jQuery("table tr").click(function(){
       var row = jQuery(this);
       var hasClass = row.hasClass("highlight");
       jQuery("table tr").removeClass("highlight");
       if(!hasClass){
         row.addClass("highlight");
         alert("Do I get here?");
       }
});

My css. EDIT: Added full css which may be the problem:

table.pretty {
width: 100%;
border-collapse: collapse;
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
clear: both;
}

/* Header cells */
table.pretty thead th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}

/* Body cells */
table.pretty tbody th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

table.pretty tbody td {
background: none repeat scroll 0 0 #eeeeee;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
text-align: center;
}

table.pretty tbody tr {
cursor: pointer;
}

/* Footer cells */  
table.pretty tfoot th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: left;
}

table.pretty tfoot td {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}


.highlight{
background-color: #a8cb17;
}

For some reason the row color doesn’t change. I tried putting the jquery code (minus the click) in the DoNav function which just starts a video when you click on the row.

What am I doing wrong. Thanks in advance.

Answer 1

Concerning your CSS

table.pretty tbody td {
   background: none repeat scroll 0 0 #eeeeee;
   ...
}

sets all table cells light grey.

.highlight{
   background-color: #a8cb17;
}

sets the background of anything highlighted to light green.

You are highlighting rows, but each cell within the green row is still gray even though the line itself is green.

To fix this, override the cell color instead. Also beware of specificity issues :

table.pretty tbody .highlight,
table.pretty tbody .highlight > td{
   background-color: #a8cb17;
}

Note that .highlight>td won’t suffice since .highlight>td (one class, one tag) is less specific than table.pretty tbody td (one class, three elements).