我有一个奇怪的问题。
我有一个表格，将输出显示为
User1
User2
User3
User4
......
那会有很多行。
现在这是一些控件的输出
我想将数据显示为
User1 User3
User2 User4
或
User1 User2
User3 User4
所以我的表格被拆分为显示两列，尽管只有一列。
我正在尝试使用 jquery 的一些 after 方法，但没有成功。
没有表头。
感谢任何帮助。
编辑
整个 html 是由 asp.net 网格视图生成的输出。
由于网格视图支持分页，所以我使用网格视图，然后根据需要拆分它。
【问题讨论】：
标签： javascript jquery
以下内容将起作用：
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() 位允许奇数行（也在我的演示中显示）。
（显然，上述方法仅适用于表格只有一列开头的情况。）
【讨论】：
非常基本的代码，适用于用户定义的#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>
【讨论】：
未测试，但您可以执行以下操作：
$(".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);
});
});
希望对你有帮助
【讨论】：
最后我解决了我的问题：
$(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();
}
}
);
【讨论】：
$(".grid tr").eq(i + 1).remove().appendTo($(".grid tr").eq(i)); 怎么样？一行代码删除奇数行并将它们附加到前一行。另请注意，这会将 1 和 2、3 和 4、5 和 6 彼此相邻放置，而您的原始问题询问将 1 到 n / 2 放在第 1 列中，将 n / 2 + 1 到 n 放在第 2 列中 -即使用 1-6 的示例，1 和 4 将彼此相邻，2 和 5 以及 3 和 6 也是如此。