jquery: перемещение (наборы) TR во вновь перемещенный TD

0

в первую очередь, спасибо за то, что нашли время, чтобы прочитать это, я постараюсь изо всех сил объяснить, что я пытаюсь достичь с помощью 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>

next: Я хочу, чтобы новый перемещал 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>

теперь вот где моя проблема:
при перемещении сгенерированного 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 (on gheader) автоматически генерируется

  • 0
    В чем проблема? Вы просто перемещаете узлы, как и любые другие узлы. Если вы выполнили первую часть, я не могу понять, почему вы не можете сделать это тоже. И кстати, вы должны просто перейти к соответствующей части вашего вопроса. Верхняя половина, которую вы уже достигли, действительно ничего не добавила.
  • 0
    это абсолютно необходимо преобразовать таблицу? может быть, генерация желаемого кода с первой попытки будет лучше?
Показать ещё 1 комментарий
Теги:

1 ответ

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

Демо: скрипка

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню