title: Table rows collapse in HTML, but not from JQuery script
body: <p>I'm trying to make table rows collapse if they contain no data. The rows get changed from within a JQuery script. I know they collapse if I place the table inside my HTML. I can create many rows and use <code>display:block</code> or <code>display:none</code> and the rows collapse/display as expected. Here is the markup:</p>
  
  <pre><code>&lt;table style="border-collapse:collapse;"&gt;
      &lt;tr style="display:block;"&gt;
          &lt;td id="someid"&gt;Test&lt;/td&gt;
          &lt;td&gt;Some text&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is example code I'm using to change the <code>&lt;tr&gt;</code>:</p>
  
  <pre><code>var newtr = "&lt;tr style='display:none;'&gt;&lt;td id='someid'&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;"
  $("td#someid").parent().replaceWith(newtr); 
  </code></pre>
  
  <p>The contents of the rows change, but they don't collapse. I'm using Firebug to see that <code>display:none</code> is being inserted. Is there something else I'm missing?</p>