大規模な単一テーブルから複数のテーブルを動的に作成する

Question

この問題はまだ解決していません。私は、列のディバイダに基づいて単一のテーブルから複数のテーブルを動的に作成したい。私はテーブルに11の列を持ち、分割は3です。つまり、3つの列を持つ3つの表があり、4つ目の表には2つの列があります。私はまた、各テーブルのヘッダーを繰り返したい。ここにサンプルHTMLテーブルがあります。

<table class="PrintTable"> 
<tr> 
    <td> 
    <table> 
     <thead> 
      <tr><th>Type Of Transaction</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Name</td> 
      </tr> 
      <tr> 
       <td>Age</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2006</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Andi</td> 
      </tr> 
      <tr> 
       <td>25</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2007</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>tom</td> 
      </tr> 
      <tr> 
       <td>26</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2008</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Tiger</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2009</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Horse</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2011</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Twinkle</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2012</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Haris</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2013</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>LEno</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2014</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Jay</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
</tr> 

予想される出力

<table class="PrintTable"> 
<tr> 
    <td> 
    <table> 
     <thead> 
      <tr><th>Type Of Transaction</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Name</td> 
      </tr> 
      <tr> 
       <td>Age</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2006</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Andi</td> 
      </tr> 
      <tr> 
       <td>25</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2007</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>tom</td> 
      </tr> 
      <tr> 
       <td>26</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td> 
    <table> 
     <thead> 
      <tr><th>2008</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Tiger</td> 
      </tr> 
      <tr> 
       <td>28</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 

</tr> 

</table> 


<table class="PrintTable"> 
    <tr> 
     <td> 
     <table> 
      <thead> 
       <tr><th>Type Of Transaction</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Name</td> 
       </tr> 
       <tr> 
        <td>Age</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     <td> 
     <table> 
      <thead> 
       <tr><th>2009</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Horse</td> 
       </tr> 
       <tr> 
        <td>28</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     <td> 
     <table> 
      <thead> 
       <tr><th>2011</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Twinkle</td> 
       </tr> 
       <tr> 
        <td>28</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     <td> 
     <table> 
      <thead> 
       <tr><th>2012</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Haris</td> 
       </tr> 
       <tr> 
        <td>28</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
</table> 

<table class="PrintTable"> 
    <tr> 
     <td> 
     <table> 
      <thead> 
       <tr><th>Type Of Transaction</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Name</td> 
       </tr> 
       <tr> 
        <td>Age</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     <td> 
     <table> 
      <thead> 
       <tr><th>2013</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>LEno</td> 
       </tr> 
       <tr> 
        <td>28</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     <td> 
     <table> 
      <thead> 
       <tr><th>2014</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Jay</td> 
       </tr> 
       <tr> 
        <td>28</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 

</table> 

すべてのヘルプは、私は（私は思うが）あなたはそれが何をしたいのかないという機能を作っ

Answer 1

を理解されるであろう。

split_up_table(master_table, number_of_columns); 

...このように呼び出すと、新しい小さなテーブルの配列が返されます。それぞれがマスターテーブルのヘッドを持ち、それぞれに正しい数のカラムがあります。

は、あなたが何を考えてください：ここでhttp://jsfiddle.net/sdleihssirhc/43gHN/

Answer 2

は、分割を行うためのjQueryのコードです。これは、3つの列 "while（（j < 3）..."とすると、関数に入れて値を渡すことができます。コードはかなり自明です。 "clone（） 『カット＆ペースト。

よろしく ニール

var printTable  = $('table.PrintTable'); 
var printTableTds = $('table.PrintTable>tbody>tr>td'); 
var numberOfTds = $(printTableTds).size() - 1; 
var tableHeader = $(printTableTds).eq(0); 
var i = 1, j; 

while (i < numberOfTds) { 
    newTable  = $('<table class="printTable" />'); 
    newTableBody = $('<tbody />').appendTo(newTable);      
    newTableRow  = $('<tr />').appendTo(newTableBody); 

    $(tableHeader).clone().appendTo(newTableRow); 

    j = 0; 
    while ((j++ < 3) && (i <= numberOfTds)) { 
     $(printTableTds).eq(i++).clone().appendTo(newTableRow); 
    } 
    $(newTable).insertBefore(printTable); 
}