Question

I am trying to seperate a dynamically loaded 60 rows single column html table to three column 20 rows using jquery in jsp.

example i Have a loaded table like this

test 1
test 2
test 3
test 4
test 5
test 6
test 7
test 8
test 9
test 10

i want to convert it like below with jquery

test 1    test 5    test 8
test 2    test 6    test 9
test 3    test 7    test 10
test 4    

code from

<div class="ui-jqdialog-content ui-widget-content" id="editcntgrid">
<span>
<form style="width: 100%; overflow: auto; position: relative; height: auto;" onsubmit="return false;" class="FormGrid" id="FrmGrid_grid" name="FormPost">
<table cellspacing="0" cellpadding="0" border="0" class="EditTable" id="TblGrid_grid">
<tbody>
<tr><td>test 1</td><td><input type="text" size="3" id="test1" name="test1" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 2</td><td><input type="text" size="3" id="test2" name="test2" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 3</td><td><input type="text" size="3" id="test3" name="test3" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 4</td><td><input type="text" size="3" id="test4" name="test4" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 5</td><td><input type="text" size="3" id="test5" name="test5" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 6</td><td><input type="text" size="3" id="test6" name="test6" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 7</td><td><input type="text" size="3" id="test7" name="test7" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 8</td><td><input type="text" size="3" id="test8" name="test8" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 9</td><td><input type="text" size="3" id="test9" name="test9" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 10</td><td><input type="text" size="3" id="test10" name="test10" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
</tbody>
</table>
</form>
</span>
</div>

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.

<div class="ui-jqdialog-content ui-widget-content" id="editcntgrid">
<span>
<form style="width: 100%; overflow: auto; position: relative; height: auto;" onsubmit="return false;" class="FormGrid" id="FrmGrid_grid" name="FormPost">
<table cellspacing="0" cellpadding="0" border="0" class="EditTable" id="TblGrid_grid">
<tr>
<td>
<table>
<tbody>
<tr><td>test 1</td><td><input type="text" size="3" id="test1" name="test1" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 2</td><td><input type="text" size="3" id="test2" name="test2" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 3</td><td><input type="text" size="3" id="test3" name="test3" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 4</td><td><input type="text" size="3" id="test4" name="test4" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
</table>
</td>
<td>
<table>
<tr><td>test 5</td><td><input type="text" size="3" id="test5" name="test5" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 6</td><td><input type="text" size="3" id="test6" name="test6" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 7</td><td><input type="text" size="3" id="test7" name="test7" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
</table>
</td>
<td>
<table>
    <tr><td>test 8</td><td><input type="text" size="3" id="test8" name="test8" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
    <tr><td>test 9</td><td><input type="text" size="3" id="test9" name="test9" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
<tr><td>test 10</td><td><input type="text" size="3" id="test10" name="test10" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</span>
</div>

can someone help me on this?

Thanks.

Answer 1

Are you not able to modify the how the table is initially built with Java? That would be the better way to handle this. If not, here’s my way to do it with jQuery:

Dynamic # of columns: http://jsfiddle.net/nWdtq/5/

2 column (as coded below): http://jsfiddle.net/UhKLm/3/ :

var rows = $('#table_id tr').length;  // Number of rows in original table
var half = Math.ceil(rows/2);         // Number of rows needed
var remove = half+1;                  // Remove any rows after the halfway point

// Loop through all the rows
for(var x = 1; x <= rows; x++){

    // Find the child to go into the second column
    var second_ele = x + half;

    // If you half way and there is an odd number of entries
    if (x == half && rows % 2 != 0){
        continue;
    }
    // Find the row with the data for the second column (half + x)
    // and append the html to the current row's html
    else if (x <= half){
        $('#table_id tr:nth-child('+x+')').html(
            $('#table_id tr:nth-child('+x+')').html()+$('#table_id tr:nth-child('+second_ele+')').html()
        )
    }
    // Any entries after half way are already in the second column, remove them.
    else{
        $('#table_id tr:nth-child('+remove+')').remove();
    }
}