jquery - 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的两个第一个（for limit = 1）之后取较大的值并将它们移动到新的第一个。

limit = 1将to更改limit = 9为限制为 10 列。在这里，新创建的表被插入到另一个之后。