Dividing HTML table into multiple table JQuery

Question

I am still stuck up in this problem. I want to create dynamically multiple tables from a single table based on column divider. Let's 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>
            </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>

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.

Any way you could avoid the nested tables? It's usually a sign that there's a better way to build your design. — Surreal Dreams
– Surreal Dreams, Commented Jan 11, 2011 at 18:51
The codes you posted are the same, just that the second one is with less columns. Is that what you want to do? Not correcting the table structure but removing some columns? (3 vs 7 columns) — Kissaki
– Kissaki, Commented Jan 11, 2011 at 18:54
Will there be any rowspan or colspan in your original table? — Phrogz
– Phrogz, Commented Jan 11, 2011 at 18:57
@Kissaki-I want to split one single table with lets say 20 columns into two table of 10 columns each with table header getting replicated in each of the table. I hope I am able to explain you — Nrusingha
– Nrusingha, Commented Jan 11, 2011 at 19:12

Kissaki · Accepted Answer · 2011-01-11 19:48:50Z

3

To break the table and only have the first 3 columns:

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

If you want to keep the first column as a header for further breaks use the :first selector and add it to an intersection of the columns.

jQuery('.PrintTable :gt(3):lt(6)')

and you’ll get the first column and those between index 3 and 6.

You can actually merge the 2 so you only have to change the 2 indices to create the correct tables. This is the code snipped you’ll need.

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 of code:

newT will hold a new tr element we will add the new tables content to. We will replace the old top tr element with this one.

We then select all the sub-tables via .PrintTable table, get the first header column with :first and add further columns selected with :gt(index) and :lt(index) where we pass an index to use. gt = greater than, lt = lower than.

We now have all columns we want to use, so we use the each() function to add each element to the prepared td.

Afterwards we can swap the old td with the new one to replace the old table with the new one.

What you really want to do though, to make it less obscure table code, improve readability and syntax as well as thus printablility and stylablility is the following:

Structure it in one table, as it is just one table of data. Use the <th> tags for headers in non <thead> tags.

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

edited Jan 11, 2011 at 19:48

answered Jan 11, 2011 at 19:01

Kissaki

9,3355 gold badges43 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kissaki Over a year ago

sry for all the edits, but it's finished now. :P Tested, works.

Nrusingha Over a year ago

Wow that was awesome. Now lets say I have 8 columns, now I will have three tables first with 3 columns, second table with three columns and 3rd table with two columns. All the table should have same header. That is what I am trying to find out.

Kissaki Over a year ago

Yeah, that works with the code above. To iterate over the number of rows you can use .size() to get the number of rows after selecting them. api.jquery.com/size Then you can iterate over the columns by changing the indices of the selectors.

Nrusingha Over a year ago

I did not understand what exactly you are doing in function(i,el){ td = jQuery('<td/>'); td.append(jQuery(el).clone()); newT.append(td); What values are getting passed in function(i,el).

Kissaki Over a year ago

The function is an anonymous function passed to each(), so it is called for each element in the list (each sub-table). A td element is created for the sub-table to be added. Then a clone of el, the which is the sub-table, is added to the td tag (clone is necessary as el is a function parameter var/ref, which will be re-used in the function). Then the td element/tag is added to the newTable.

|

Collectives™ on Stack Overflow

Dividing HTML table into multiple table JQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related