title: How to split a table row with jQuery (insert TR between TD's)
body: <p>I have some problem splitting a table with jQuery.</p>
  
  <p>This is the table:</p>
  
  <pre><code>&lt;table width="100%" id="submenu"&gt;
      &lt;tr&gt;
          &lt;td class="submenu"&gt;A&lt;/td&gt;
          &lt;td class="submenu"&gt;B&lt;/td&gt;
          &lt;td class="submenu"&gt;C&lt;/td&gt;
          &lt;td class="submenu"&gt;D&lt;/td&gt;
          &lt;td class="submenu"&gt;E&lt;/td&gt;
          &lt;td class="submenu"&gt;F&lt;/td&gt;  
          &lt;td class="submenu"&gt;G&lt;/td&gt;     
          &lt;td class="submenu"&gt;H&lt;/td&gt;        
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to make it look like this after I call a function:</p>
  
  <pre><code>&lt;table width="100%" id="submenu"&gt;
      &lt;tr&gt;
          &lt;td class="submenu"&gt;A&lt;/td&gt;
          &lt;td class="submenu"&gt;B&lt;/td&gt;
          &lt;td class="submenu"&gt;C&lt;/td&gt;
          &lt;td class="submenu"&gt;D&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="submenu"&gt;E&lt;/td&gt;
          &lt;td class="submenu"&gt;F&lt;/td&gt;  
          &lt;td class="submenu"&gt;G&lt;/td&gt;     
          &lt;td class="submenu"&gt;H&lt;/td&gt;        
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have tried with:</p>
  
  <pre><code>$(function(){
      $('.submenu td:eq(3)').after('&lt;/tr&gt;&lt;tr&gt;');
  });
  </code></pre>