title: Adding and removing cells from table via JavaScript
body: <p>I've seen a fair amount about add/remove table rows but not much about adding/removing table cells.  I am using a table to make a grid of squares, then merging groups of squares into rectangles (making Tetris-like shapes).  I delete several squares when creating a rectangle, set the colspan of its "index cell" to fill in the gap left by deleted cells.  Later I need to reverse this -- index cell back to square, then replacing the "missing"  elements with programatically-generated new ones. </p>
  
  <p>The problem is if I later need to remove any of these generated cells for the next shape, the program can't find them.  I can see them on the DOM and even check their classes/ids, but to the program they are invisible (can't select via jQuery id or class selector).  Hint: cellindex for these cells is -1 -- as if the table thinks they are appended somewhere else in the DOM hierarchy.</p>
  
  <p>Here's HTML:</p>
  
  <pre><code>                &lt;td class="cell"&gt;&lt;/td&gt;
                  &lt;td class="cell"&gt;&lt;/td&gt;
                  &lt;td class="cell enterBtn" colspan="3" rowspan="1" id="enterBtn"&gt;&lt;/td&gt;
                  &lt;td class="cell"&gt;&lt;/td&gt;
                  &lt;td class="cell"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Here's JavaScript trying to create the "fill in" cells after returning a rectangle to square shape:</p>
  
  <pre><code>// ======= ======= ======= unMergeArea ======= ======= =======
  Game.prototype.unMergeArea = function(whichArea) {
      var indexCell = this.tableCellsArray[whichArea.iR][whichArea.iC];
      $(indexCell).attr("colSpan", 1);
      $(indexCell).attr("rowSpan", 1);
      for (var j = 0; j &lt; whichArea.iH; j++) {
          for (var i = 0; i &lt; whichArea.iW; i++) {
              if (!((i == 0) &amp;&amp; (j == 0))) {
                  var newCell = document.createElement("td");
                  $(indexCell).after(newCell);
                  $(newCell).addClass("cell");
              }
          }
      }
      $(indexCell).removeClass(whichArea.class);
      $(indexCell).addClass("cell");
      return indexCell;
  }
  </code></pre>
  
  <p>And here's script for later remove cells for another rectangle to fill in. The program can not find "nextCell":</p>
  
  <pre><code>// ======= ======= ======= mergeArea ======= ======= =======
  Game.prototype.mergeArea = function(whichArea) {
      var nextCell;
      var indexCell = this.tableCellsArray[whichArea.iR][whichArea.iC];
      for (var j = 0; j &lt; whichArea.iH; j++) {
          for (var i = 0; i &lt; whichArea.iW; i++) {
              if (!((i == 0) &amp;&amp; (j == 0))) {
                  nextCell = $(this.tableCellsArray[whichArea.iR + j][whichArea.iC + i]);
                  $(nextCell).remove();
                  $(nextCell).addClass("gone");
                  }
              }
          }
      }
      $(indexCell).attr("colSpan", whichArea.iW);
      $(indexCell).attr("rowSpan", whichArea.iH);
      $(indexCell).addClass(whichArea.class);
      return indexCell;
  }
  </code></pre>
  
  <p>Any thoughts?  This has been agonizing!  </p>