將HTML表格分成多個表JQuery

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> 

預期輸出： -

<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

爲了打破錶，只有第3列：

newT = jQuery('<tr></tr>'); 
jQuery('.PrintTable table:lt(3)').each(
function(i,el){ 
    td = jQuery('<td/>'); 
    td.append(jQuery(el).clone()); 
    newT.append(td); 
}); 
jQuery('.PrintTable').html(newT); 

如果你想保留第一列作爲標題，以便進一步使用:first選擇器並將其添加到交叉點列的重刑。

jQuery('.PrintTable :gt(3):lt(6)') 

，你會得到第一列的索引3和6

之間實際上，你可以合併2，所以你只需要改變的2個索引創建正確的表。 這是你需要的代碼。

newT = jQuery('<tr></tr>'); 
jQuery('.PrintTable table:first').add('.PrintTable table:gt(0):lt(3)').each(
function(i,el){ 
    td = jQuery('<td/>'); 
    td.append(jQuery(el).clone()); 
    newT.append(td); 
}); 
jQuery('.PrintTable').html(newT); 

的Exlanation代碼：

蠑螈將舉行，我們將內容添加到新表的新tr元素。我們將用這個替換舊的top tr元素。

我們然後通過.PrintTable table選擇所有的子表，與:first拿到第一頭列，並添加與:gt(index)和:lt(index)選擇進一步列在這裏我們通過使用索引。 gt =大於，lt =小於。

我們現在有所有我們想要使用的列，所以我們使用each()函數將每個元素添加到準備的td。

之後我們可以將舊的td換成新的替換舊的表格。

---

你真想做雖然什麼，讓它少晦澀表的代碼，提高可讀性和語法，以及由此printablility和stylablility如下：

結構是在一個表中，因爲它只是一個數據表。使用<th>標記標記在非<thead>標記中。

<table> 
    <thead> 
     <tr> 
      <th>Type Of Transaction</th> 
      <th>2006</th> 
      <th>2007</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Name</th> 
      <td>Andi</td> 
      <td>tom</td> 
     </tr> 
     <tr> 
      <th>Age</th> 
      <td>25</td> 
      <td>26</td> 
     </tr> 
    </tbody> 
</table>