how to dynamically change html table single column 60 rows to three column 20 rows
<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>
