我仍然坚持这个问题。我想基于列分隔符从单个表中动态创建多个表。比方说,我在一个表中有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>
任何帮助将不胜感激。
答案 0 :(得分:3)
要破坏表格,只有前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元素,我们将添加新的表格内容。我们将用这个替换旧的top tr元素。
然后,我们通过.PrintTable table
选择所有子表,使用:first
获取第一个标题列,并添加使用:gt(index)
和:lt(index)
选择的其他列,我们通过要使用的索引。 gt =大于,lt =低于。
我们现在拥有了我们想要使用的所有列,因此我们使用each()
函数将每个元素添加到准备好的td
。
之后我们可以将旧的td与新的td交换,用旧的替换旧表。
你真正想要做的是,使其不那么模糊的表格代码,提高可读性和语法,以及因此可打印性和时尚性如下:
在一个表中构建它,因为它只是一个数据表。将<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>