Question

我正在尝试使用jsp中的jquery将动态加载的60行单列html表分隔为三列20行。

示例我有一个像这样的加载表

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

我想用jquery

将它转换成如下所示

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动态转换为下面的代码，将其分为3列，如果我有更多行，则需要灵活地生成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

查看此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 2

您是否无法修改最初使用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 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++;
});

如何动态更改html表单列60行到3列20行

3 个答案: