Split table with jQuery

Question

I am trying to write a jQuery plugin that will let me split a table into multiple tables. I need to be able to split tables into 2, 3 and 4 new tables.

I was able to produce code that works as expected on most browsers, but it fails in IE 10.

(function($) {
  $.fn.splitTable = function(options) {

    // Options
    var settings = $.extend({
      tableSplit: 2,
    }, options);

    var tbl = this,
      tblHead = tbl.children('thead'),
      tblBody = tbl.children('tbody');

    if (tbl.is('table')) {
      tbl.html('<div class="js-split-table-container js-split-table-container-' +
          settings.tableSplit + '" />')
        .children().unwrap()
        .each(function() {

          var rowsPerTable = [],
            rows = tblBody.children('tr'),
            minRowsPerTable = Math.floor(rows.length / settings.tableSplit),
            difference = rows.length - (minRowsPerTable * settings.tableSplit);

          for (var i = 0; i < settings.tableSplit; i++) {
            if (i < difference) {
              rowsPerTable[i] = minRowsPerTable + 1;
            } else {
              rowsPerTable[i] = minRowsPerTable;
            }
          }

          for (i = 0; i < settings.tableSplit; i++) {
            $('<table class="js-split-table js-split-table-' + (i + 1) + '"><tbody /></table>')
              .prepend(tblHead.clone())
              .appendTo($(this))
              .wrap('<div class="js-split-table-item js-split-table-item-' + (i + 1) + '" />');
            for (var j = 0; j < rowsPerTable[i]; j++) {
              var pointer = 0;
              for (var k = 0; k < i; k++) {
                pointer += rowsPerTable[k];
              }
              $(this).find('.js-split-table-' + (i + 1) + ' tbody')
                .append(rows[j + pointer]);
            }
          }
        });
    }
  };
}(jQuery));

$('table').splitTable({
  tableSplit: 3
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
  </tbody>
</table>

Answer 1

I got this working with this revised code. Works in IE and all other browsers.

function splitTable(tableCount, table){
	var splitTables = $('<div class="js-split-table-container js-split-table-' + tableCount + '" />'),
		thead = table.children('thead'),
		tbody = table.children('tbody'),
		rowCount = tbody.children('tr').length,
		tableRows = Math.floor(rowCount / tableCount),
		difference = rowCount - (tableRows * tableCount);

	for (var i=0; i < tableCount; i++) {
		if(i < difference) {
			rowsPerTable = tableRows + 1;
		} else {
			rowsPerTable = tableRows;
		}
		var rows = tbody.children('tr').slice(0, rowsPerTable),
			newTables = $('<table class="js-split-table-item js-split-table-item' + (i + 1) + ' "><tbody /></table>')
				.append(rows)
				.prepend(thead.clone());
		splitTables.append(newTables);
		rowsPerTable = tableRows;
	}
	table.replaceWith(splitTables);
}
splitTable(3, $("table.split-table"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table class="split-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Blah Blah</td>
      <td>2016</td>
    </tr>
  </tbody>
</table>