Javascript 使用jquery将每行1列表转换为每行2列表
我有一个奇怪的问题 我有一个表,它将输出显示为Javascript 使用jquery将每行1列表转换为每行2列表,javascript,jquery,Javascript,Jquery,我有一个奇怪的问题 我有一个表,它将输出显示为 User1 User2 User3 User4 ...... 那会有很多行 这是一些控件的输出 我想把数据显示为 User1 User3 User2 User4 或 User1 User2 User3 User4 因此,我的表被拆分为两列,而不是一列 我正在尝试使用jquery的一些after方法,但没有成功 表中没有标题 感谢您的帮助 编辑 整个html是由asp.net网格视图生成的输出 由于grid view支持分页,
User1
User2
User3
User4
......
那会有很多行
这是一些控件的输出
我想把数据显示为
User1 User3
User2 User4
或
User1 User2
User3 User4
因此,我的表被拆分为两列,而不是一列
我正在尝试使用jquery的一些after方法,但没有成功
表中没有标题
感谢您的帮助
编辑
整个html是由asp.net网格视图生成的输出
由于grid view支持分页,因此我使用gridview,然后根据需要将其拆分。未测试,但您可以执行以下操作:
$(".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);
});
});
$(“.your_table_class>tbody>tr”)。每个(函数(){
var$tr=$(this.addClass(“column01”),
$tds=$tr.children(),
中间部分=数学地板($tds.length/2),
$newColumn=$('',{class:“column02”}).insertAfter($tr);
$tds.每个(功能(j){
j>中间部分和$(本).附录($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();
}
}
);
$(文档)。准备好了吗(
函数(){
对于(var i=0;i,类似于以下内容的内容将起作用:
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]);
var$tds=$(“#yourtable td”),
i、 j;
对于(i=0,j=Math.ceil($tds.length/2);j<$tds.length;i++,j++)
$($tds[i]).parent().append($tds[j]);
如中所示
注意,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>
尼米特表2科隆
$(文档).ready(函数(){
var myNewTable='';
var itemCounter=1;
var-nCol=2;
$('#myTable td')。每个(函数(索引){
如果((项计数器%nCol)==0)
myNewTable=myNewTable++'+$(this.html()++'';
其他的
myNewTable=myNewTable++'+$(this.html()++'';
itemCounter++;
});
myNewTable=myNewTable+“”;
$('#myTable').html(myNewTable);
});
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
我也发布了我的答案,你能不能看一下改进一下,因为这样做很有效,或者你可以修改和更新你的答案。谢谢,最后一行不来了properly@nDudani事实上,我不想显示最后一行,因为那是一个寻呼机。整个html是asp.net网格视图的输出,这就是为什么我不想显示页面关于($(“.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和4也将相邻5、3和6。我正要说@ClarkeyBoy做了什么-这并没有产生问题所要求的输出,示例输出显示表的下半部分已上移到上半部分(这就是我对答案所做的).这是一种更简单的表达我刚才所说的话的方式…我从来没有想到过简单的方式来表达事情,是不是把“Item2”移到“Item1”的旁边,把“Item4”移到“Item3”的旁边等等?因为这不是问题所要求的。。。