Question

How do I split a table:

I have a table that i want to split in different tables when the rows are to long. I made a script that measures the height of row and adds it up to the height till a specific height is met. Then the class “new-row” will be added. That is as far as I come…

Javascript jQuery

$(document).ready(function(){
  var init_height = $("table").height();   // total table height
  var max_height = 400;                    // example max height
  if(init_height > max_height) {
    var pages = Math.ceil(init_height / max_height);
  }
  var start_height = 0;                    // start counter
  $("table").find("tr").each(function(){
    start_height = start_height + $(this).height();
    if(start_height > max_height) {
      $(this).addClass("new");             // marks the new table
      start_height = 0;                    // reset counter
    }
  });

  //$(this).find('.new'); ???????????

});

HTML

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Dolor sit amet..... etc</td>
    <tr>
    <!-- a lot more rows here -->
  </tbody>
</table>

In this jsfiddle you can see the rows that should begin in a new table marked red. My desired outcome would also have the theads in every new table.

Answer 1

Most of what you want:

http://jsfiddle.net/BCK89/1/

$(".new").each(function () {
  $("<table>").insertAfter("table:last");
  $("<thead>").append("table:last");
  $(this).nextUntil('.new').addBack().appendTo("table:last");
});

I’m not sure whether you want to leave the .new in the old table or not. If you don’t, remove .addBack. You will also have to fill the <thead>, but that should be pretty easy.