title: Changing adjacent cells in table when an event is triggered in JQuery
body: <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>