2

テーブルを分割する方法:

行が長すぎる場合に別のテーブルに分割したいテーブルがあります。行の高さを測定し、特定の高さに達するまで高さに加算するスクリプトを作成しました。次に、クラス「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では、赤でマークされた新しいテーブルで開始する必要がある行を確認できます。私が望む結果は、すべての新しいテーブルにもスレッドがあります。

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 に答える