title: how to dynamically change html table single column 60 rows to three column 20 rows
body: <p>I am trying to seperate a dynamically loaded 60 rows single column html table to three column 20 rows using jquery in jsp.</p>
  
  <p>example i Have a loaded table like this</p>
  
  <pre><code>test 1
  test 2
  test 3
  test 4
  test 5
  test 6
  test 7
  test 8
  test 9
  test 10
  </code></pre>
  
  <p>i want to convert it like below with jquery</p>
  
  <pre><code>test 1    test 5    test 8
  test 2    test 6    test 9
  test 3    test 7    test 10
  test 4    
  </code></pre>
  
  <p>code from</p>
  
  <pre><code>&lt;div class="ui-jqdialog-content ui-widget-content" id="editcntgrid"&gt;
  &lt;span&gt;
  &lt;form style="width: 100%; overflow: auto; position: relative; height: auto;" onsubmit="return false;" class="FormGrid" id="FrmGrid_grid" name="FormPost"&gt;
  &lt;table cellspacing="0" cellpadding="0" border="0" class="EditTable" id="TblGrid_grid"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;test 1&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test1" name="test1" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 2&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test2" name="test2" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 3&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test3" name="test3" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 4&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test4" name="test4" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 5&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test5" name="test5" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 6&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test6" name="test6" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 7&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test7" name="test7" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 8&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test8" name="test8" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 9&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test9" name="test9" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 10&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test10" name="test10" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>code to be dynamically converted to below using jquery, making this into 3 columns,and need to have a flexibility to make to 4 columns if i have more rows.</p>
  
  <pre><code>&lt;div class="ui-jqdialog-content ui-widget-content" id="editcntgrid"&gt;
  &lt;span&gt;
  &lt;form style="width: 100%; overflow: auto; position: relative; height: auto;" onsubmit="return false;" class="FormGrid" id="FrmGrid_grid" name="FormPost"&gt;
  &lt;table cellspacing="0" cellpadding="0" border="0" class="EditTable" id="TblGrid_grid"&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;test 1&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test1" name="test1" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 2&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test2" name="test2" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 3&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test3" name="test3" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 4&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test4" name="test4" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td&gt;test 5&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test5" name="test5" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 6&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test6" name="test6" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 7&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test7" name="test7" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;test 8&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test8" name="test8" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;test 9&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test9" name="test9" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;test 10&lt;/td&gt;&lt;td&gt;&lt;input type="text" size="3" id="test10" name="test10" role="textbox" class="FormElement ui-widget-content ui-corner-all"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>can someone help me on this?</p>
  
  <p>Thanks.</p>