Jquery维护表列数为10个移动列到新表

Question

我有一个正在打印的动态html表，需要保持列数为10以避免截断。我试图将列数限制为10并将其上方的任何列移动到新表，然后将新表附加到div（id="divTtableContainer"）。

我还需要维护与TR和TD元素相关的所有属性。如果有人能提供帮助，我们将不胜感激。

实施例： 为简单起见，我在此示例中将列数减少为2。

<div id="divTtableContainer">
<table id="tblFlowsheet">
<tr>
<td class="header">1</td>
<td class="header">2</td>
</tr>
<tr>
<td class="Data">1</td>
<td class="Data">2</td>
</tr>
<tr>
<td class="Data">1</td>
<td class="Data">2</td>
</tr>
</table>
</div>

The end result would be as follows

<div id="divTtableContainer">
<table id="tblFlowsheet_2">
<tr>
<td class="header">1</td>
</tr>
<tr>
<td class="Data">1</td>
</tr>
<tr>
<td class="Data">1</td>
</tr>
</table>

<table id="tblFlowsheet_2">
<tr>
<td class="header">2</td>
</tr>
<tr>
<td class="Data">2</td>
</tr>
<tr>
<td class="Data">2</td>
</tr>
</table>
<div>

Answer 1

这应该会给你一个良好的开端：

http://jsfiddle.net/XxqRK/1/

这里的主要技巧是：.append($('>:gt('+limit+')',this));。基本上，它在行的两个第一（对于td）之后需要limit = 1更大并将它们移动到新行。

将limit = 1更改为limit = 9以限制为10列。这里，新创建的表紧接着插入。