どのように動的にhtmlテーブルの単一の列60行を3列20行に変更する

Question

私は動的に読み込まれた60行の単一列のHTMLテーブルを3つの列20行にjspでjsperyを使用して分離しようとしています。

例私は

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

コード

<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> 

コードからjQueryを使って以下のようにそれを変換するこの

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

のようなロードされたテーブルを動的に変換する必要があります下にjqueryを使って、これを3列にし、もしi havならば4列にする柔軟性が必要です行が増えます。

<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> 

誰かが私にこれを手伝うことができますか？

ありがとうございました。

Answer 1

でジャストショット

テーブルをJavaで最初にビルドする方法を変更できませんか？これはこれを処理するより良い方法でしょう。ない場合は、ここでjQueryを使ってそれを行うには私の方法です：http://jsfiddle.net/nWdtq/5/

2列（以下コード化されたとして）：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(); 
    } 
} 

Answer 2

このMulticolumチュートリアルチェックアウト：

http://www.webkrauts.de/2011/12/08/css-3-im-praxistest-multi-column-layout/

を私は私がこのCSSでそれをやった同じ問題を持っていた：

.text_split { 
-webkit-column-count: 2; 
-webkit-column-gap: 50px; 
-moz-column-count: 2; 
-moz-column-gap: 50px; 
-o-column-count: 2; 
-o-column-gap: 50px; 
column-count: 2; 
column-gap: 50px; 
} 

Answer 3

暗い

var tdArray = new array(); 
$('.tdclass').each(function(){ 
    tdArray.push($(this).html()); 
}); 

$('#tablid').html(''); 
var i = 0; 
$.each(tdArray,function(index,value){ 
    if(i == 0){ 
    $('#tableid').append(<tr>) 
    } 
    $('#tableid').append('<td>'+value+'</td>'); 
    if(i == 1){ 
    i = 0; 
    $('#tableid').append('</tr>); 
    } 
    i++; 
});