CODEWITHSUNDEEP
jquerycss
MShack
MShack

Reputation: 652

solution to break table td into rows of 6 or less

Looking for a css or jquery solution to break these dynamically loaded tables into a max of 6 per row , the script that creates the tables places them all inline , and sometimes up to 32 td.tables are shown in one row. How can i break them where only a max of 6 are to show inline

here is the HTML

<table class="scoreboardboxscore">
    <tbody>
        <tr data-bind="foreach: matchups">
            <td>
                <table class="boxscoretable"></table>
            </td> 
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td> 
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
            <td>
                <table class="boxscoretable"></table>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Views: 281

Answers (1)

Regent
Regent

Reputation: 5178

You can take all tds from table, put them into newly created trs and remove original tr at the end:

Fiddle.

$(document).ready(function()
{
    var elementsPerRow = 6;

    var currentTr = $('<tr>');
    var table = $('.scoreboardboxscore');
    var tds = $('.scoreboardboxscore tr:first td');
    tds.each(function(index)
    {
        currentTr.append(this);
        if (index % elementsPerRow == elementsPerRow - 1)
        {
            table.append(currentTr);
            currentTr = $('<tr>');
        }
        else if (index + 1 == tds.length)
        {
            table.append(currentTr);
        }
    });
    $('.scoreboardboxscore tr:first').remove();
});

Upvotes: 1

Related Questions