title: Finding the position of current td cell when click on
body: <p>Im trying to find the current cell that the user has clicked on. For  example if the user clicked on the first cell, I want to return 1. If they clicked on the tenth cell I want to return 10. There are 16 total cells in the table. </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;
  
          //The d
          var gameBoard = new Array(getTdCount())
  
          for(var i =0; i &lt; getTdCount(); i++)
          {
              gameBoard[i] = 0;
          }
  
  
  
  
  
          function getTdCount()
          {
              return $("td").length;
          }
  
          $(document).ready(function()
          {
  
              $("#board tr td").hover(function()
              {
                  $(this).css('border-color', '00FF33');
              },
              function()
              {
                  $(this).css('border-color', 'black')
              })
  
              var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')     
              $('td').append($offProtoType)
  
              $("#board tr td").click(function()
              {
                  $("img", this).attr('src', 'on.png')
  
              })
  
          });
  
  
          &lt;/script&gt;
  
          &lt;style type="text/css"&gt;
          td
          {
              border-style:solid;
              border-color:black;
              background-color:black;
              float:left;
          }
  
          &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;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>