I would like to split a "big" table (a lot of columns) to smaller tables every for example 2 columns.
我想将一个“大”表(很多列)分成小表,例如每列2列。
Is there an easy way to do that?
有一个简单的方法吗?
I only have the table here http://jsfiddle.net/xy3UF/4/. And I would like for example split it every 2 columns. As a result I should have a three tables with containing the #
column and each one containing 2 of the columns from the big table.
我这里只有表http://jsfiddle.net/xy3UF/4/。我希望例如每2列拆分一次。因此,我应该有一个包含#列的三个表,每个表包含大表中的两列。
Desired output: http://jsfiddle.net/xy3UF/15/
期望的输出:http://jsfiddle.net/xy3UF/15/
4 个解决方案
#1
5
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();
}
}
}
}
Where $table
is the table jQuery object, and chunkSize
is the size of each split. In your example, call it as split($("table"), 2)
. Note that chunkSize
must evenly divide the number of columns (excluding the first one) for this to work correctly, for example, for a table with 7 columns, the valid values for chunkSize
are 1, 2, and 3.
其中$ table是表jQuery对象,而chunkSize是每个split的大小。在您的示例中,将其称为split($(“table”),2)。请注意,chunkSize必须均匀地划分列数(不包括第一列)才能使其正常工作,例如,对于包含7列的表,chunkSize的有效值为1,2和3。
DEMO.
#2
1
I made better version of table split function that support fix columns (repeat in all tables) and it waste a lot of time:
我制作了更好的表格分割功能版本,支持修复列(在所有表格中重复),浪费了大量时间:
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>
#3
0
using XSLT you can solve the problem easily.
使用XSLT可以轻松解决问题。
Please visit here: Split large table into several smaller tables
请访问这里:将大桌分成几张小桌子
#4
0
This is much simpler.
这更简单。
1) Mark the TR:
1)标记TR:
<tr><td>some</td><!-- SPLITHERE -->
2) Split the table:
2)拆分表:
document.body.innerHTML = document.body.innerHTML.replace(/<!-- SPLITHERE --\>\s*<\/tr>/i, '</tr></table></div><div class="eachPage"><table class="items">');
#1
5
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();
}
}
}
}
Where $table
is the table jQuery object, and chunkSize
is the size of each split. In your example, call it as split($("table"), 2)
. Note that chunkSize
must evenly divide the number of columns (excluding the first one) for this to work correctly, for example, for a table with 7 columns, the valid values for chunkSize
are 1, 2, and 3.
其中$ table是表jQuery对象,而chunkSize是每个split的大小。在您的示例中,将其称为split($(“table”),2)。请注意,chunkSize必须均匀地划分列数(不包括第一列)才能使其正常工作,例如,对于包含7列的表,chunkSize的有效值为1,2和3。
DEMO.
#2
1
I made better version of table split function that support fix columns (repeat in all tables) and it waste a lot of time:
我制作了更好的表格分割功能版本,支持修复列(在所有表格中重复),浪费了大量时间:
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>
#3
0
using XSLT you can solve the problem easily.
使用XSLT可以轻松解决问题。
Please visit here: Split large table into several smaller tables
请访问这里:将大桌分成几张小桌子
#4
0
This is much simpler.
这更简单。
1) Mark the TR:
1)标记TR:
<tr><td>some</td><!-- SPLITHERE -->
2) Split the table:
2)拆分表:
document.body.innerHTML = document.body.innerHTML.replace(/<!-- SPLITHERE --\>\s*<\/tr>/i, '</tr></table></div><div class="eachPage"><table class="items">');