Question

我有一个奇怪的问题。

我有一个表格，将输出显示为

User1
User2
User3
User4

......

那将有很多行。

现在这是某些控件的输出

我想将数据显示为

User1   User3
User2   User4

或

User1   User2
User3   User4

所以我的表被拆分为显示两列而不是一列。

我试图使用一些jquery方法，但没有成功。

表格没有标题。

感谢任何帮助。

修改

整个html是由asp.net网格视图生成的输出。

由于网格视图支持分页，所以我使用gridview，然后根据需要我想拆分它。

Answer 1

以下内容将起作用：

var $tds = $("#yourtable td"),
    i, j;

for (i=0, j=Math.ceil($tds.length / 2); j < $tds.length; i++,j++)
   $($tds[i]).parent().append($tds[j]);

如this demo所示。

注意，Math.ceil()位允许奇数行（也在我的演示中显示）。

（显然，只有当表格只有一列开头时，上述情况才有效。）

Answer 2

非常基本代码，适用于用户定义的#td，您只需要更改nCol的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nimit Table two colonm</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var myNewTable='<table><tr>';
    var itemCounter=1;
    var nCol=2;
    $('#myTable td').each(function(index) {
        if( (itemCounter%nCol)==0)
            myNewTable = myNewTable + '<td>'+$(this).html()+'</td></tr><tr>';
        else
            myNewTable = myNewTable + '<td>'+$(this).html()+'</td>';

        itemCounter++;
    });
    myNewTable=myNewTable+'</tr></table>';
    $('#myTable').html(myNewTable);

});
</script>
</head>
<body>
<table id="myTable">
    <tr><td>Item1</td></tr>
    <tr><td>Item2</td></tr>
    <tr><td>Item3</td></tr>
    <tr><td>Item4</td></tr>
    <tr><td>Item5</td></tr>
    <tr><td>Item6</td></tr>
    <tr><td>Item7</td></tr>
    <tr><td>Item8</td></tr>
    <tr><td>Item9</td></tr>
    <tr><td>Item10</td></tr>
</table>
</body>
</html>

Answer 3

未经过测试，但您可以执行以下操作：


$(".your_table_class > tbody > tr").each(function() {
    var $tr = $(this).addClass("column01"),
    $tds = $tr.children(), 
    midSection = Math.floor($tds.length / 2), 
    $newColumn = $('<tr />', {class: "column02"}).insertAfter($tr);
    $tds.each(function(j) {
      j > midSection && $(this).appendTo($newColumn); 
    });
});

希望有所帮助

Answer 4

最后我用：

解决了我的问题

$(document).ready(
    function () {


        for (var i = 0; i <= $('.grid tr').length - 3; i = i + 2) {
            $('.grid tr').eq(i).append($('.grid tr').eq(i + 1).html());
            $('.grid tr').eq(i + 1).hide();
        }
    }
    );

不知道这段代码有多糟糕。

请帮助改善这一点。

谢谢

使用jquery将每行1列创建为每行表2列

4 个答案: