Hi all, I'm new to Jquery and I have a problem I'd like to ask. I've followed a code snippet online to add a background color to a table column, but my problem is that when the 2nd row is selected, the 1st row disappears. How can I make each row remain on the td I've selected?
Here's the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"><html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/ jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('td').click( function(){ $('td.selected').removeClass('selected'); $(this).addClass('selected').children("inp...@type=radio]").click(); }); }); </script> <style type="text/css"> td { color: #000; } td.selected { background-color: #ccc; } </style> </head> <body> <table> <tr> <td>Red <input type="radio" name="color" value="red" /></td> <td>Blue <input type="radio" name="color" value="blue" /></td> <td>Green <input type="radio" name="color" value="green" /></td> </tr> <tr> <td>Apple <input type="radio" name="color" value="apple" /></td> <td>Oranges <input type="radio" name="color" value="oranges" /></ td> <td>Pears <input type="radio" name="color" value="pears" /></td> </tr> </table> </body> </html>