Question

首先，感谢您花时间阅读本文，我将尽力解释我正在尝试使用jquery实现的目标，我目前仍然坚持在一个新位置移动TR集。我可以移动标题就好了。

这是我生成的表格的样子：

<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
 <td class="gheader" colspan="2">header1</td>
</tr>
<tr>
 <td class="glabel"><label id="label1">label1</label></td>
 <td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>

<tr>
 <td class="gheader" colspan="2">header2</td>
</tr>
<tr>
 <td class="glabel"><label id="label2">label2</label></td>
 <td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>

下：我想在第一个（td.class＆gt; gheader）旁边移动TD's ..是的，这是可能的/完成的。现在，我的表看起来像：

<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
 <td class="gheader">header1</td>
 <td class="gheader">header2</td>
..and so on
</tr>
<tr>

现在这里是我的问题所在：
将生成的td与类gheader（header1，header2，header3）一起移动到同一行时，如何移动以下内容：

<tr>
 <td>label(id)</td>
 <td>checkbox(id)</td>
<tr>

在新移动的每个标题之间

可能的表输出如下：

<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value="">    </td>

 <td class="glabel"><label id="label2">label2</label></td>
 <td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>

其他说明：
colspan 2（在gheader上）是自动生成的

Answer 1

尝试

var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()

演示：Fiddle

jquery：将TR移动（设置）到新移动的TD

1 个答案: