Question

Simple table:

    <table class="schedules">
        <th colspan="2">Saved Schedules</th>
        <tr>
            <td>Winter 2011 </td>           
        </tr>
        <tr>
            <td>Winter 2011 (2) </td>           
        </tr>
        <tr>
            <td>May Term 2011 </td>         
        </tr>
        <tr>
            <td>Fall Term 2011</td>         
        </tr>       
    </table>

Jquery:

    <script type="text/javascript">
        $(document).ready(function(){
            $(".schedules td").click(function(){
                $(this).css("background-color","blue")
                $(this).siblings().css("background-color","white");         
            });
        });     
    </script>

This should toggle the selected cell to background-color:blue and the siblings to background-color:white, but when I click each cell just changes to background-color:blue and the others don’t change at all.

Answer 1

Your <td>‘s are cousins, not siblings. The td’s parents (the <tr>‘s) are siblings. You could modify the jquery like this…

http://jsfiddle.net/superuntitled/fb4g7/

    $(document).ready(function(){
        $(".schedules tr").click(function(){
            $(this).find('td').css("background-color","blue")
            $(this).siblings().find('td').css("background-color","white");         
        });
    });