打破10 td的一套5内tr

Question

我正在从外部网站获得一个页面，在那里我没有控制。现在桌子上有这样的东西：

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

我把所有的TD都排在一条线上。现在，使用jquery，我想修复这个问题，对于每5个TD计数，它应该添加关闭的</tr>并添加一个打开的<tr>，其余的TD应该在其中

尝试像这样的：

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

这里是一个更新，我忘了提到:第一行总是包含td中的标签，第二行总是包含数据，我尝试了这样的方法：

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

但是它开始于同一行的标签，在下面的部分中，它将tr分解成两个tr。

我更新了以下问题:我尝试过的代码和U给出的代码只对第一部分起作用，而在第二个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>

​

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相关的单元格并将它们附加到新行中。小提琴是这里。

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

演示：http://jsfiddle.net/oq44q48q/3/