Разделение таблицы HTML на несколько таблиц JQuery - PullRequest
1 голос
/ 11 января 2011

Я все еще застрял в этой проблеме. Я хочу динамически создавать несколько таблиц из одной таблицы на основе разделителя столбцов. Допустим, у меня в таблице 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>

Любая помощь будет оценена.

1 Ответ

3 голосов
/ 11 января 2011

Чтобы разбить таблицу и иметь только первые 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);

Объяснение кода :

newT будет содержать новый элемент tr, который мы будемдобавить новый контент таблиц в.Мы заменим старый верхний элемент tr на этот.

Затем мы выберем все вложенные таблицы с помощью .PrintTable table, получим первый столбец заголовка с помощью :first и добавим дополнительные столбцы, выбранные с помощью :gt(index) и:lt(index) где мы передаем индекс для использования.gt = больше чем, lt = ниже чем.

Теперь у нас есть все столбцы, которые мы хотим использовать, поэтому мы используем функцию each(), чтобы добавить каждый элемент к подготовленному td.

* 1030.* После этого мы можем поменять старый тд на новый, чтобы заменить старую таблицу новой.

То, что ты действительно хочешь сделать, хотя, чтобы сделать код таблицы менее понятным, улучшить читаемость иСинтаксис, а также, таким образом, возможность печати и стилизация следующие:

Структурируйте его в одну таблицу, так как это всего лишь одна таблица данных.Используйте теги <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>
...