打破10 td在5內部tr

我從外部網站，我無法控制的頁面。現在桌子上有這樣的東西：打破10 td在5內部tr

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

我在所有這一行中都得到了這一切。現在使用jQuery我想解決這個問題，與TD的每5個計數，它應該添加結束</tr>並添加一個開放<tr>，其餘TD的應該進來他們

嘗試一些類似這樣的：

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

這裏是一個更新，我忘了提：第一行總是行總是包含內TD的的標貼和第二reow總是包含數據，我想是這樣的：

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

，但它開始與標籤所有關於Ë同一直線上，並在下面的部分，它打破了TR分爲兩個TR的

我更新的問題，其中的代碼，我試圖和U給作品僅在第一部分，它從來沒有工作在第二TR

來源

2014-12-19 acf

使用它像這樣... $ （「tr td：n-child（5）」）.append（「 - 2nd！「）; – Lakhan

夥計你那裏，請指導 – acf

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

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

來源

2014-12-19 12:45:21 dfsq

權利，但我再次編輯我的問題，你可以請檢查 – acf

你再次檢查我的問題，它工作，但現在它顯示在頂部的兩行和表單字段底部2拖行，就像標題不是firld，因爲它應該是我的，它有點複雜的代碼片段，我迷路了 – acf

我添加了小提琴，http://jsfiddle.net/06qofna8/你的代碼也加入了標題，如果你看到的標題與我正在嘗試的不同：我想在每個標題下的值應該去 – acf

你可以這樣做：

$('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相關單元格，並將它們追加到一個新的行。小提琴是here。

來源

2014-12-19 12:41:12

嘗試像這樣...這一定會解決您的問題。

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

$（「TR TD：第n個孩子（5N）」）.append（「HTML」）;

來源

2014-12-19 12:46:35 Lakhan

嗨，謝謝，但我們爲什麼使用-2nd – acf

這只是內容。用任何你想要的內容替換這個內容。 – Lakhan

只需使用此$（「tr td：n-child（5）」）。邏輯。 – Lakhan

或者你可以嘗試這樣的事：

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

來源

2014-12-19 12:56:08

它工作正常，但問題是，它分裂td的，但它顯示一個接一個的標題和表單字段分開，所以當我們分割td的時候不可能，第二個表單的值應該出現在它下面，否則它們正在加載 – acf

你可以這樣做：

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/

來源

2014-12-19 16:22:50

真棒男人，謝謝 – acf

打破10 td在5內部tr

回答

相關問題