Dynamically creating multiple table from a large single table_问答_开发者

I am still stuck up in this problem. I want to create dynamically multiple tables from a single table based on column divider. Lets say, I have 11 columns in a table and the divider is 3. So, there will be three tables with three columns and the fourth table will have two columns. I also want to repeat the header in each table. Here is sample HTML 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>
  <td>
    <table>
        <thead>
            <tr><th>2009</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Horse</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>开发者_Python百科
        </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>

Expected Output

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

Any help will be appreciated

I made a function that (I think) does what you want it to do. Call it like this:

split_up_table(master_table, number_of_columns);

...and it will return an array of the new, smaller tables. Each one has the head of the master table, and each has the right number of columns.

See what you think: http://jsfiddle.net/sdleihssirhc/43gHN/

Here is the jQuery code to do the splitting. This does it for 3 columns "while((j < 3)...", you could make it into a function and pass in the value. The code is fairly self explanatory. Dont forget the "clone()" method to "copy and paste" rather than "cut and paste".

Regards Neil

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);
}