Динамическое создание нескольких таблиц из одной большой таблицы - PullRequest
Новая
       15

Динамическое создание нескольких таблиц из одной большой таблицы

1 голос
/ 20 января 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 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>

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

Ответы [ 2 ]

1 голос
/ 21 января 2011

Вот код jQuery для разделения.Это делается для 3 столбцов "while ((j <3) ..."), вы можете превратить его в функцию и передать значение. Код достаточно понятен. Не забывайте метод "clone ()" для "копировать и вставлять ", а не" вырезать и вставлять ". </p>

С уважением, Нил 

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);
}
1 голос
/ 20 января 2011

Я сделал функцию, которая (я думаю) делает то, что вы хотите, чтобы она делала.Назовите это так: 

split_up_table(master_table, number_of_columns);

... и он вернет массив новых таблиц меньшего размера.У каждого есть заголовок главной таблицы, и у каждого есть правильное количество столбцов.

Посмотрите, что вы думаете: http://jsfiddle.net/sdleihssirhc/43gHN/

...