將「big」表拆分爲更小的表

Question

我想將「big」表（很多列）拆分爲更小的表，例如每個2列。

有沒有簡單的方法來做到這一點？

我只有這裏的表http://jsfiddle.net/xy3UF/4/。我想例如每2列分割一次。因此，我應該有一個包含#列的三個表格，每個表格包含大表格中的兩列。

所需的輸出：使用XSLT，你可以很容易地解決這個問題http://jsfiddle.net/xy3UF/15/

Answer 1

function split($table, chunkSize) { 
    var cols = $("th", $table).length - 1; 
    var n = cols/chunkSize; 

    for (var i = 1; i <= n; i++) { 
    $("<br/>").appendTo("body"); 
    var $newTable = $table.clone().appendTo("body"); 
    for (var j = cols + 1; j > 1; j--) { 
     if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) { 
      $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove(); 
     } 
    } 
    } 
} 

哪裏$table是表jQuery對象，並chunkSize是每個的大小劃分。在您的示例中，將其稱爲split($("table"), 2)。需要注意的是，必須chunkSize平均劃分列的數目（不包括第一個）爲使其正常工作，例如，爲表7列，則有效值chunkSize是1，2，和3。

DEMO。

Answer 2

。

請點擊這裏查看：Split large table into several smaller tables

Answer 3

我取得了較好的版本表拆分功能，支持固定列（重複所有表中），它浪費了大量的時間：

function range(start, end) { 
 
    var array = new Array(); 
 
    for (var i = start; i <= end; i++) { 
 
    array.push(i); 
 
    } 
 
    return array; 
 
} 
 

 
function splitTables($tables, chunkSize, fixCols) { 
 
    $table = $($tables); 
 
    console.log('fixCols :', fixCols); 
 
    fixCols = fixCols || []; 
 
    console.log('fixCols :', fixCols); 
 
    fixCols = fixCols.sort(); 
 
    console.log('fixCols :', fixCols); 
 
    //chunkSize -= fixCols.length; 
 
    var rowLength = $('tr:first>*', $table).length; 
 
    console.log('total length:', rowLength); 
 
    var n = Math.ceil(rowLength/chunkSize); 
 
    var bufferTables = []; 
 
    var numberList = range(1, rowLength); 
 

 
    for (var i = 1; i <= n; i++) { 
 
    var colList = fixCols.slice(0); 
 
    //console.log('fixCols :',fixCols); 
 
    //console.log('colList :',colList); 
 
    console.log('numberList :', numberList); 
 
    while (colList.length < chunkSize && numberList.length > 0) { 
 
     var index = numberList.shift(); 
 
     console.log(index, colList); 
 
     if (colList.indexOf(index) == -1) { 
 
     colList.push(index); 
 
     } 
 
    } 
 

 
    console.log('col list:', colList); 
 
    var $newTable = $table.clone(true) 
 
    for (var index = 1; 
 
     (index <= rowLength); index++) { 
 
     if (colList.indexOf(index) == -1) { 
 
     console.log('removing:', index); 
 
     $('tr>:nth-child(' + index + ')', $newTable).hide(); 
 
     } 
 
    } 
 
    bufferTables.push($newTable) 
 
    } 
 

 
    $(bufferTables.reverse()).each(function(i, $el) { 
 
    $('<br/>').insertAfter($table); 
 
    $el.insertAfter($table); 
 
    }); 
 
    $table.remove(); 
 

 
} 
 

 
$(function() { 
 
    $('#sbtn').click(function() { 
 
    splitTables($("#tb"), 3, [1]); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sbtn">Split Table !</button> 
 

 
<table border="1" id="tb"> 
 
    <thead> 
 
    <tr> 
 
     <th>0</th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>Sum</td> 
 
     <td>$180</td> 
 
     <td>$500</td> 
 
     <td>$300</td> 
 
     <td>$700</td> 
 
     <td>$600</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td>Home</td> 
 
     <td>$100</td> 
 
     <td>$200</td> 
 
     <td>$200</td> 
 
     <td>$300</td> 
 
     <td>$400</td> 
 
     <td>$500</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Work</td> 
 
     <td>$80</td> 
 
     <td>$300</td> 
 
     <td>$100</td> 
 
     <td>$400</td> 
 
     <td>$200</td> 
 
     <td>$500</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

這要簡單得多。

1）標記該TR：

<tr><td>some</td><!-- SPLITHERE --> 

2）拆分表：

document.body.innerHTML = document.body.innerHTML.replace(/<!-- SPLITHERE --\>\s*<\/tr>/i, '</tr></table></div><div class="eachPage"><table class="items">');