How to wrap <tr /> after nth <td> of a table using jquery

Question

I want to wrap <row /> after second td of my table.

Here is my code:

<table class="test table">
    <tbody>
        <tr><td>Row 1 col 1</td><td>Row 1 col 2</td><td>Row 1 col 3</td><td>Row 1 col 4</td></tr>

        <tr><td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td><td>Row 2 col 4</td></tr>

        <tr><td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td><td>Row 3 col 4</td></tr>

        <tr><td>Row 4 col 1</td><td>Row 4 col 2</td><td>Row 4 col 3</td><td>Row 4 col 4</td></tr>
     </tbody>
</table>

I want to see my code like this:

<table class="test table">
    <tbody>
        <tr><td>Row 1 col 1</td><td>Row 1 col 2</td></tr><tr><td>Row 1 col 3</td><td>Row 1 col 4</td></tr>

        <tr><td>Row 2 col 1</td><td>Row 2 col 2</td></tr><tr><td>Row 2 col 3</td><td>Row 2 col 4</td></tr>

        <tr><td>Row 3 col 1</td><td>Row 3 col 2</td></tr><tr><td>Row 3 col 3</td><td>Row 3 col 4</td></tr>

        <tr><td>Row 4 col 1</td><td>Row 4 col 2</td></tr><tr><td>Row 4 col 3</td><td>Row 4 col 4</td></tr>
     </tbody>
</table>

I tried this way:

$(".test tr td:eq(2)").wrap('<tr />');

But its not working properly.

Answer 1

So our final goal is to add </tr><tr> after the second <td> ends. If you try the code like $(".test tr td:eq(1)").after('</tr><tr>'); , it won't work. This will add the element like below.

Because using JQuery you can't add the closing as it as directly like above. You can get more article if you google it for why you can't add closing tag in JQuery. Now coming to our problem, how we can fix the issue.

Thanks to @Frédéric Hamidi giving the solution for the same kind of situation for ul and li elements here . In JQuery, you can use nextAll() with andSelf() to get the elements you want to move, then create a new <tr> and use append() to relocate the elements. I refactor his solution to fix our issue like below.

 $("table.test tr td:nth-child(3)").each(function(){ $("<tr>").insertAfter($(this).parent()) .append($(this).nextAll().andSelf()); }); 

 body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="test table"> <tbody> <tr><td>Row 1 col 1</td><td>Row 1 col 2</td><td>Row 1 col 3</td><td>Row 1 col 4</td></tr> <tr><td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td><td>Row 2 col 4</td></tr> <tr><td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td><td>Row 3 col 4</td></tr> <tr><td>Row 4 col 1</td><td>Row 4 col 2</td><td>Row 4 col 3</td><td>Row 4 col 4</td></tr> </tbody> </table> 

Here is the JSFiddle version, if you want to workout some other stuff.

Answer 2

One option is to loop thru your <td> s and wrap it by 2. And using .html() update the table tbody

 $(function() { var td = $(".test td"); var html = ""; for (var x = 0; x < td.length; x += 2) { html += "<tr>"; html += $(td[x]).prop('outerHTML'); html += $(td[x + 1]).prop('outerHTML'); html += "</tr>"; } $(".test tbody").html(html); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="test table"> <tbody> <tr><td>Row 1 col 1</td><td>Row 1 col 2</td><td>Row 1 col 3</td><td>Row 1 col 4</td></tr> <tr><td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td><td>Row 2 col 4</td></tr> <tr><td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td><td>Row 3 col 4</td></tr> <tr><td>Row 4 col 1</td><td>Row 4 col 2</td><td>Row 4 col 3</td><td>Row 4 col 4</td></tr> </tbody> </table>