javascript - Changing the color of a clicked table row using jQuery -
i need help,
how can i, using jquery,
change background color of selected row in table (for example, let's use the css class "highlighted"
and if same row clicked on again, change default color (white) select 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> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
.highlight { background-color: red; }
if want multiple selections
$("#data tr").click(function() { $(this).toggleclass("highlight"); });
if want 1 row in table selected @ time
$("#data tr").click(function() { var selected = $(this).hasclass("highlight"); $("#data tr").removeclass("highlight"); if(!selected) $(this).addclass("highlight"); });
also note table tag has 2 id attributes, can't that.
Comments
Post a Comment