Breaking 10 t in a set of 5 inside tr

Question

I get a page from an external site where I have no control. Now the table has something like this:

    <table><tbody>
<!-- headers -->
<tr><td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
<!-- body -->
<tr><td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
</tbody></table>

I get all this TD in all one line. now with jquery I want to fix this using every 5 TD samples, it should add a close </tr>and add a open <tr>, and the remaining TD should go inside them

Trying to do the following:

if($("#container").find("table>tbody>tr>td").length <=5)){
do the breaking here 
}

Here is the update, I forgot to mention: in the first line, the rows always contain the tables in td, and the second reow always contains the data, I tried something like this:

$('#mypahe form table>tbody>tr:odd').each(function(){
    $('<tr>').insertAfter(this).append($('>:gt(4)',this))
});

but it started with the fact that the labels are on the same line and at the bottom, it splits tr into two tr

I updated the question, where is the code that I tried, and U gave work only in the first part, and it never works in the second tr

Answer 1

- , :

$('#container table td:gt(4)').wrapAll('<tr>').parent().appendTo('#container table tbody');

td {border: 1px #DDD solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <table>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>

Hide result

UPD. , :

$('#container table tr').each(function() {
    $(this).find('td:gt(4)').wrapAll('<tr>').parent().appendTo('#container table tbody');
});

http://jsfiddle.net/06qofna8/2/

Answer 2

:

$('table').find('tr').each(function() {
    // collect all cells with an index greater 4
    var newCells = $(this).find('td:gt(4)'),
        // add a row below current
        newRow = $('<tr>').insertAfter(this);
    // add new row
    newRow.append(newCells);
});

, grep . Fiddle .

Answer 3

:

function groupUp(TRelement, groups) {
    var trs = [];
    var groupSize = Math.floor(TRelement.children.length / groups);
    for (var i = 0; i < groups; ++i) {
        trs[i] = document.createElement("tr");
        for (var j = 0; j < groupSize; ++j) {
            trs[i].appendChild(TRelement.children[0]);
        }
    }

    while (TRelement.children.length > 0) {
        trs[groups - 1].appendChild(TRelement.children[0]);
    }

    var table = TRelement.parentNode;
    table.removeChild(TRelement);
    trs.forEach(function (element) {
        table.appendChild(element);
    });
}

var trs = document.querySelectorAll("table tr");
for(var i = 0; i < trs.length; ++i){
    groupUp(trs[i], 2);   
}

DEMO: http://jsfiddle.net/oq44q48q/3/

Answer 4

, ... , .

$( "tr td: nth-child (5n)" ).each(function() {$ (this).append( "HTML" );});

$( "tr td: nth-child (5n)" ).append( "HTML" );

Answer 5

Or you can try something like this:

if($("#container").find("table>tbody>td").length <=5){    


 var theElements = $("#container").find("table>tbody>tr>td");    
    var theOutput = '';    
    $('tbody').empty();        
    $('tbody').append('<tr>');    
    for(var i = 1; i <= theElements.length + 1; i++) {    
        theOutput +=  theElements[i-1];    
        $('tbody').append(theElements[i-1])    
        if(i%5 == 0) {    
            $('tbody').append('</tr><tr>');    
        }    
    }     
    $('tbody').append('</tr>');    
}