Question

I would like to split a “big” table (a lot of columns) to smaller tables every for example 2 columns.

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.

Desired output: 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();
         }
     }
  }  
}

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.

DEMO.