CODEWITHSUNDEEP
javascriptjqueryhtml
fundedbygnomes
fundedbygnomes

Reputation: 11

jquery: move (sets) of TR to a newly moved TD

first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.

here is what my generated table looks like:

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

next: I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like: 

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

now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:

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

in between each headers which was newly moved

possible table output would look like: 

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

other notes:
colspan 2 (on gheader) is auto generated

Upvotes: 0

Views: 71

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388376

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

Demo: Fiddle

Upvotes: 1

Related Questions