John Smith John Smith - 1 year ago 95
Javascript Question

Changing the color of a clicked table row using jQuery

I need your help,

How can I, using jQuery,

Change the background color of the selected row in my table (for this example, let's use the the css class "highlighted"

and if the same row is clicked on again, change it back to its default color (white) select the css class "nonhighlighted"

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
background: red;
}
.nonhighlighted {
background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>

</html>

Answer Source
.highlight { background-color: red; }

If you want multiple selections

$("#data tr").click(function() {
    $(this).toggleClass("highlight");
});

If you want only 1 row in the table to be selected at a time

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

Also note your TABLE tag has 2 ID attributes, you can't do that.