How to split Table Cells into multiple rows using JQuery

Question

I have a table like this,

<table class='location'>
<tbody>
<tr align=center>
   <td>Content 1</td>
   <td>Content 2</td>
   <td>Content 3</td>
   <td>Content 4</td>
   <td>Content 5</td>
   <td>Content 6</td>
   <td>Content 7</td>
   <td>Content 8</td>
</tr>
</tbody>
</table>

I want to re-arrange this table using JQuery like,

    <table class='location'>
    <tbody>
    <tr align=center>
       <td>Content 1</td>
       <td>Content 2</td>
    </tr>
    <tr align=center>
       <td>Content 3</td>
       <td>Content 4</td>
    </tr>
    <tr align=center>
       <td>Content 5</td>
       <td>Content 6</td>
    </tr>
    <tr align=center>
       <td>Content 7</td>
       <td>Content 8</td>
    </tr>
    </tbody>
    </table>

2 cells in each row. ie 4 rows with 2 cells each.

Please guide me, as I am beginner to JQuery.

Thanks

Community · Accepted Answer · 2017-05-23 12:15:00Z

2

Below several jQuery methods such as each(), append(), attr(), first() and last() are applied. Also isOdd function from an older Stackoverflow answer is being used to check td element position.

// loop through each table td element
$("table.location td").each(function (index) {
    // check if it's odd or even td element based on its position
    // element index is added 1 before checking if its position has even or odd number because index starts from 0
    var odd = isOdd((index + 1));
    //if td element is position order number is odd then create new table row
    //and append it to the table
    if (odd) {
        $("table.location tbody").append($("<tr>").attr("align", "center"));
    }
    //then append the current td element to the last table row
    //the last table row is the most recently created row
    $("table.location tr").last().append($(this));
});
//finally remove the first table row which is empty
$("table.location tr").first().remove();

function isOdd(num) {
    return num % 2;
}

Fiddle

I hope you find the answer okay :-)

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Apr 5, 2015 at 12:50

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krishna Over a year ago

Thanks Bro, let me check, Hope this will do... :)

Krishna Over a year ago

Yes Bro, the logic/code u suggested resolved my problem :) . But I did some changes in suggested code like,

$(".location td").each(function (index) {     if ((index % 2) == 0) {         $(".location tbody").append($('<tr>'));     }     $(".location tr").last().append($(this)); });

mainly I changed the if condition and removed code for removing first row..... Thanks alot, for neatly explained solution

Collectives™ on Stack Overflow

How to split Table Cells into multiple rows using JQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related