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>

Reply via email to