将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>