jquery - 具有特定高度的分割 table

Question

如何拆分表格:

我有一个表，当行太长时，我想将其拆分为不同的表。我制作了一个脚本来测量行的高度并将其添加到高度直到满足特定高度。然后将添加“new-row”类。这就是我目前为止的情况...

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>

在此jsfiddle您可以看到应在标记为红色的新表中开始的行。我想要的结果是每个新表中都有 thead。

Answer 1

您想要的大部分内容:

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

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

我不确定您是否要离开 .new是否在旧表中。如果不这样做，请删除 .addBack 。您还必须填写<thead> ，但这应该很容易。