Javascript jquery:将TR的(组)移动到新移动的TD

Javascript jquery:将TR的(组)移动到新移动的TD,javascript,jquery,html,Javascript,Jquery,Html,首先,感谢您花时间阅读本文,我将尽我最大的努力解释我试图使用jquery实现的目标,我目前正在一个新的位置上移动TRs集。我可以很好地移动标题 以下是我生成的表的外观: <table border="1"> <thead class='thx'> ..tr th here </thead> <tbody> <tr> <td class="gheader" colspan="2">header1</td> <

首先,感谢您花时间阅读本文,我将尽我最大的努力解释我试图使用jquery实现的目标,我目前正在一个新的位置上移动TRs集。我可以很好地移动标题

以下是我生成的表的外观:

<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>

…在这里
校长1
标签1
校长2
标签2
下一步: 我想把新的TD移到第一个(TD.class>gheader)旁边。。是的,这是可能的/完成的。现在,我的桌子看起来像:

<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>

…在这里
校长1
校长2
等等
现在我的问题就在这里:
将生成的td与gheader类(header1、header2、header3)移动到同一行时,我如何移动以下内容:

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

标签(id)
复选框(id)
在新移动的每个标头之间

可能的表输出如下所示:

<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>  

H
我
校长1
校长2
标签1
标签2
其他注意事项:
colspan 2(在gheader上)是自动生成的

Try

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()

演示:

有什么问题?只需像移动任何其他节点一样移动节点。如果你完成了第一部分,我不明白你为什么也不能完成。顺便说一句,你应该直接跳到问题的相关部分。你已经完成的上半部分真的没有添加任何内容。是否绝对有必要转换表格?可能是第一次尝试的理想代码会更好吗?蓝调,我只是添加了上半部分以供参考。谢谢你的意见。RubenKazumov,是的,生成一个理想的代码会更好,但这意味着所有其他生成的表看起来都一样,我只是将这个特定的表转换为一个报告。