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.
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>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论