title: Create clickable grid jQuery/Javascript
body: <p>My goal is to create a clickable grid in jQuery/javascript that when a cell is clicked it will return the index value of the cell and then not allow for anymore clicking after the first click (I'm working on a board game so a click on the board would be a move and once you have moved you can't move until your next turn). However, currently I'm having issues simply getting my click event to work properly. </p>
  
  <p>For now I'm just looking to make it so when I click on my grid it changes the color of the cell to red.</p>
  
  <p>I looked at <a href="https://stackoverflow.com/questions/9140101/creating-a-clickable-grid-in-a-web-browser">Creating a Clickable Grid in a Web Browser</a> but I have very little experience with js so I was fairly confused by how the callback functions worked. Therefore I was attempting to use part of that example and jQuery which seems, at least to me, to be much more understandable when it comes to attaching events to things.</p>
  
  <p>EDIT: Forgot to say what my issue was but its the fact that when I run all of the following code and click on the grid nothing happens.</p>
  
  <p>grid.js:</p>
  
  <pre><code>$(document).ready(function()
      {
          grid();
      });
  
  $("#grid td").click(function()
      {
          alert("Clicked!");
          $("#grid td").addClass("clicked");
      });
  
  function grid()
  {
      var grid = document.getElementById("grid");
  
      for(var r = 0; r&lt;18; r++)
      {
          var tr = grid.appendChild(document.createElement('tr'));
  
          for(var c = 0; c&lt;18; c++)
          {
              var cell = tr.appendChild(document.createElement('td'));
          }
      }
  }
  </code></pre>
  
  <p>grid.css:</p>
  
  <pre><code>.grid { margin:1em auto; border-collapse:collapse }
  .grid td {
      cursor:pointer;
      width:30px; height:30px;
      border:1px dotted #ccc;
      text-align:center;
      font-family:sans-serif; font-size:16px
  }
  .grid td.clicked {
      background-color:red;
  }
  </code></pre>
  
  <p>test.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;  
      &lt;meta charset="utf8"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="grid.css" rel="stylesheet"&gt;
      &lt;script src="grid.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;table class="grid" id="grid"&gt;
          &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>