javascript - Make a 1 columns per row table into 2 columns per row table using jquery

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

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

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 asked Mar 5, 2012 at 6:38 Moons 3,8544 gold badges51 silver badges83 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 7

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Make a 1 columns per row table into 2 columns per row table using jquery - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)