使用jquery将每行表格分成2列每行表格

我有一个表，其中将显示输出

User1 
User2 
User3 
User4 

......

这将有很多行。

现在，这是一些控制的输出

我想要显示的数据

User1 User3 
User2 User4

User1 User2 
User3 User4

所以我的表被分割显示两列 - 一个。

我想使用jQuery的一些方法，但没有成功。

表中没有标题。

任何帮助表示赞赏。

EDIT

整个HTML是一种由asp.net网格视图中产生的输出。

由于网格视图支持分页，所以我去与gridview，然后根据我希望分裂它的愿望。

来源

2012-03-05 Moons

最后我用解决我的问题：

$(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(); 
     } 
    } 
    );

不知道有多少坏这段代码是。

请帮助改善这一点。

谢谢

来源

2012-03-05 06:50:41 Moons

最后一行未能正常显示 – 2012-03-05 07:00:09

@nDudani其实我不想将最后一行显示为传呼机。这整个html是一个asp.net网格视图的输出，这就是为什么我不想显示寻呼机 – Moons 2012-03-05 07:03:35

'$（“。grid tr”）。eq（i + 1）.remove（）。appendTo（$（ “.grid tr”）。eq（i））;'？一行代码，用于删除奇数行并将它们附加到前一行。另外请注意，这会将1＆2,3和4,5和6放在一起，而您的原始问题是在第1列中将1到n/2和第2列中的n/2 + 1到n放在一起 - 即使用1-6,1和4的例子将彼此相邻，就像2和5以及3和6一样。 – ClarkeyBoy 2012-03-05 07:07:58

未测试，但你可以这样做以下：

 

$(".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); 
    }); 
});

希望它可以帮助

来源

2012-03-05 06:50:01

我也发布我的答案，请你看看改善它，因为这是工作，或者你可以修改和更新你的答案。谢谢 – Moons 2012-03-05 06:51:47

喜欢的东西下面的工作：

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()位是为了允许奇数行（也在我的演示中显示）。

（显然，如果表中只有一列，开始与上述才有效。）

来源

2012-03-05 06:52:40 nnnnnn

+1正确答案 – 2012-03-05 07:48:30

+1，聪明的答案！ – 2012-09-25 12:45:01

非常基本的代码，用户自定义#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>

来源

2012-03-05 06:59:27

这不会将“Item2”移动到“Item1”旁边，“Item4”旁边是“Item3”等等？因为这不是问题要求... – nnnnnn 2012-03-05 07:11:11

@nnnnnn让我更新脚本] – 2012-03-05 07:47:15

使用jquery将每行表格分成2列每行表格

回答

相关问题