Changing adjacent cells in table when an event is triggered in JQuery
<p>I'm trying to make a game of lights out. I can get the lights to toggle on and off when i click them, but i am having trouble thinking up logic to make the adjacent one come one as well. For example if i click an edge of the table, I should see the three lights adjacent to the light i clicked, become lit. I'm thinking maybe it has something to do with the "this" bound in my click method, Maybe the "this" is only referencing the one i clicked on and not the adjacent ones. I need to know, perhaps how to get it to reference the adjacent ones?</p>

<pre><code> &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Lights Out!&lt;/title&gt;
        &lt;script type="text/javascript" src="jquery-1.4.js"&gt;&lt;/script&gt;

        &lt;script type= "text/javascript"&gt;

        var gameBoard = new Array(getTdCount())




        function lightStatus(position)
        {
            //if light is on
            if(gameBoard[position] ==true)
            {
                //set the original status back to false
                gameBoard[position] = false;
                return false                
            }

            //turn on light
            gameBoard[position]=true;
            return gameBoard[position]
        }



        function getTdCount()
        {
            return $("td").length;
        }

        function getTrCount()
        {
            return $("tr").length;
        }


        function switchLights( obj, num )
        {
            if(lightStatus(num))
                {

                    $("img", obj).attr('src', 'on.png')
                }
                else
                {
                    $("img", obj).attr('src', 'off.png')
                }



        }


        $(document).ready(function()
        {

            $("#board tr td").hover(function()
            {
                $(this).css('border-color', '00FFCC');
            },
            function()
            {
                $(this).css('border-color', 'black')
            })

            var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')     
            $('td').append($offProtoType)

            $tds = $('#board tr td');
            $tds.click(function()
            {
                var num = $tds.index(this) + 1; 


                    switchLights(this, num)

            })

        });


        &lt;/script&gt;

        &lt;style type="text/css"&gt;
        td
        {
            border-style:solid;
            border-color:black;
            background-color:black;
            float:left;
        }

        body
        {
            background-color: grey;
            color: green;
        }


        &lt;/style&gt;


        &lt;/head&gt;
        &lt;body&gt;

        &lt;img style = "display:none" id="offprototype"  src ="off.png"&gt;
        &lt;img style = "display:none" id="onprototype"  src ="on.png"&gt;

        &lt;h1 align="center"&gt;Lights Out&lt;h1&gt;

        &lt;table id="board" border="3" bgcolor="black"  align="center"&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;input type="button" value="Shuffle" onclick="change()"/&gt;
        &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
