Dviding 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 и добавьте его в interec столбцов.

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 этим.

Затем мы выбираем все вложенные таблицы с помощью .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>