title: Knockout: How do I preserve table cell order?
body: <p>I have this fiddle...
  <a href="http://jsfiddle.net/tvwxyz/1ju0vng1/5/" rel="nofollow">http://jsfiddle.net/tvwxyz/1ju0vng1/5/</a></p>
  
  <pre><code>&lt;input id="cb1" type="checkbox" data-bind="checked: myValue, click: myAction" /&gt;
  &lt;table id="tb1" border="1"&gt;
      &lt;tr&gt;
          &lt;td rowspan="2"&gt;a1&lt;/td&gt;
          &lt;td&gt;a2&lt;/td&gt;
          &lt;td&gt;a3&lt;/td&gt;
          &lt;td&gt;a4&lt;/td&gt;
          &lt;td&gt;a5&lt;/td&gt;
          &lt;td&gt;a6&lt;/td&gt;
          &lt;td rowspan="2"&gt;a7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;b2&lt;/td&gt;
          &lt;td&gt;b3&lt;/td&gt;
          &lt;td&gt;b4&lt;/td&gt;
          &lt;td&gt;b5&lt;/td&gt;
          &lt;td&gt;b6&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div data-bind="text: myValue"&gt;&lt;/div&gt;
  
  var viewModel = {
      myValue: ko.observable(false),
      myAction: function() {
          if($("#cb1").prop("checked")){
              $("#tb1 tr:first td").hide();
              $("#tb1 tr:first td:first").show();
              $("#tb1 tr:first td:last").show();
          }else{
              $("#tb1 tr:first td").show();
          }
         return true;
      }    
  };
  </code></pre>
  
  <p>When the page loads, you can see the A1 and A7 cells span both rows.
  Clicking the checkbox hides A2-A6 (which is what I want) but A7 is no longer in its original position.</p>
  
  <p>How do I preserve the original table cell order when hiding inner cells?</p>