admin管理员组文章数量:1315827
I have a strange issue.
I have a table that will show the output as
User1
User2
User3
User4
......
That will have lot of rows.
Now this is the output of some control
I want to show the data as
User1 User3
User2 User4
OR
User1 User2
User3 User4
So my table is split to show two columns in-spite of one.
I am trying to use some after method of jquery but no sucess.
There is no header of the table.
Any help is appreciated.
EDIT
The whole html is a output that was generated by asp grid view.
Since grid view supports paging so i go with gridview and then as per the reuirement i want to split it.
I have a strange issue.
I have a table that will show the output as
User1
User2
User3
User4
......
That will have lot of rows.
Now this is the output of some control
I want to show the data as
User1 User3
User2 User4
OR
User1 User2
User3 User4
So my table is split to show two columns in-spite of one.
I am trying to use some after method of jquery but no sucess.
There is no header of the table.
Any help is appreciated.
EDIT
The whole html is a output that was generated by asp grid view.
Since grid view supports paging so i go with gridview and then as per the reuirement i want to split it.
Share Improve this question edited Apr 19, 2012 at 11:52 Moons asked Mar 5, 2012 at 6:38 MoonsMoons 3,8544 gold badges51 silver badges83 bronze badges4 Answers
Reset to default 7Something like the following will work:
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]);
As shown in this demo.
Note, the Math.ceil() bit is to allow for an odd number of rows (also shown in my demo).
(Obviously the above only works if the table has only one column to start with.)
Very Basic Code, work for user defined #td, you just need to change value of nCol.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
Not Tested, but you could do something like following:
$(".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);
});
});
Hope it helps
Finally I solved my problem using:
$(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();
}
}
);
本文标签： javascriptMake a 1 columns per row table into 2 columns per row table using jqueryStack Overflow
版权声明：本文标题：javascript - Make a 1 columns per row table into 2 columns per row table using jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741962061a2407335.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论