从大单表动态创建多个表

Question

我仍然在这个问题上陷入困境。我想要根据列分隔符从一个表中动态创建多个表。比方说，我有一个表中的11列，分隔符是3.所以，将有三列三列，第四列将有两列。我也想重复每个表格中的标题。这里是示例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); 
}