using jquery addclass to add css to table

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.

Can you provide a fiddle? I can see nothing wrong with this code. — John Dvorak
– John Dvorak, Commented Jan 18, 2013 at 18:40
Perhaps the table is built dynamically? If so, you need delegation — John Dvorak
– John Dvorak, Commented Jan 18, 2013 at 18:41
Perhaps the table cells have their own background that hides the row background? — John Dvorak
– John Dvorak, Commented Jan 18, 2013 at 18:41
Like @JanDvorak said, maybe .highlight declaration in your css is earlier then table's style declaration. — Wojciech Jasiński
– Wojciech Jasiński, Commented Jan 18, 2013 at 18:43

Joseph Silber · Accepted Answer · 2013-01-18 18:55:00Z

3

What you have should work, but is unnecessarily complex. Here's the same piece of code, much shorter:

var $rows = jQuery("table tr");
$rows.click(function() {
    $rows.removeClass('highlight');
    jQuery(this).addClass('highlight');
});

Here's the fiddle: http://jsfiddle.net/gkxNa/

edited Jan 18, 2013 at 18:55

answered Jan 18, 2013 at 18:43

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Dvorak · Accepted Answer · 2013-01-18 20:11:52Z

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

edited Jan 18, 2013 at 20:11

answered Jan 18, 2013 at 20:02

John Dvorak

27.4k13 gold badges73 silver badges86 bronze badges

2 Comments

Tom Over a year ago

thanks for looking. I wasn't aware of this but that still didn't work. Do I need to change the jquery to use td instead of tr?

John Dvorak Over a year ago

@Tom specificity issues strike again. Fixed.

Collectives™ on Stack Overflow

using jquery addclass to add css to table

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related