2

如何拆分表：

我有一个表，当行太长时，我想将其拆分为不同的表。我制作了一个脚本来测量行的高度并将其添加到高度直到达到特定高度。然后将添加“新行”类。就我而言，这就是...

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 中，您可以看到应该在标记为红色的新表中开始的行。我想要的结果也会在每张新桌子上都有头。

4

1 回答 1

3

大部分你想要的：

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>，但这应该很容易。

于 2013-01-18T14:08:40.477 回答