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>&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> 

.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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -