jquery - 将表 td 分成 6 行或更少行的解决方案

Question

寻找一个 css 或 jquery 解决方案来将这些动态加载的表分解为每行最多 6 个，创建表的脚本将它们全部内联，有时一行中显示多达 32 个 td.tables。我怎样才能在最多只有 6 个内联显示的情况下打破它们

这是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>

Answer 1

您可以从表中取出所有 td，将它们放入新创建的 tr 中，并在末尾删除原始 tr:

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