打破10 td's in set of 5 inside 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只在第一部分工作，它永遠不會在第二部分工作

Answer 1

你可以這樣做：

$('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 2

你可以這樣做：

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/

Answer 3

你可以做這樣的事情，例如：

 $('#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 4

試試這樣......它肯定會解決你的問題。

$（“tr td：nth-​​child（5n）”）.each（function（）{$（this）.append（“HTML”）;}）;

要么

$（“tr td：nth-​​child（5n）”）。append（“HTML”）;

Answer 5

或者您可以嘗試這樣的事情：

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