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