Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перестановка tr (https://javascript.ru/forum/jquery/79769-perestanovka-tr.html)

shareware 22.03.2020 11:24

Перестановка tr
 
Добрый день.

Помогите доработать, пожалуйста..

Задача: необходимо все tr с классом premium поставить поверх tr с классом not.

Структура таблицы
<table style="border: 1px solid black">
<thead >
  <th>ID</th>
  <th>Имя</th>
  <th>Фамилия</th>
  
</thead>
<tbody >
  <tr class="not">
    <td>1</td>
    <td>Антоша</td>
    <td>Антоша</td>
      <tr class="not-child">
        <td colspan=2 style="text-align: center">Ne</td>
      </tr>
  </tr>
    <tr class="premium">
    <td>2</td>
    <td>Серега</td>
    <td>Кочегарин</td>
     <tr class="premium-child">
      <td colspan=2 style="text-align: center">premium</td>
    </tr>
  </tr>
    <tr class="not">
    <td>3</td>
    <td>Саня</td>
    <td>Жопин</td>
     <tr class="not-child">
      <td colspan=2 style="text-align: center">Ne</td>
    </tr>
  </tr>
    <tr class="premium">
    <td>4</td>
    <td>Ваня</td>
    <td>Жлобин</td>
     <tr class="premium-child">
      <td colspan=2 style="text-align: center">premium</td>
    </tr>
  </tr>
</tbody>
</table>


Имеющийся скрипт..each() не обязателен..игрался с вариантами прост
$('tbody').each(function() {
if ($('tr').hasClass('premium'))
{
    $('.not, .not-child').insertAfter('.premium + .premium-child');
}
});


Для одного любого tr с классом premium работает идеально, но если их двое и более - начинается мракобесие

laimas 22.03.2020 12:37

$('tr.premium').insertAfter('tbody')

voraa 22.03.2020 13:20

const body = document.querySelector('tbody');
body.querySelectorAll('tr.premium').forEach( tr => tbody.appendChild(tr) );
body.querySelectorAll('tr.not').forEach( tr => tbody.appendChild(tr) );

рони 22.03.2020 13:32

Цитата:

Сообщение от shareware
class="not-child"

Цитата:

Сообщение от shareware
class="premium-child"

может сначала исправить строки с этими классами?

shareware 22.03.2020 14:04

Цитата:

Сообщение от рони (Сообщение 521605)
может сначала исправить строки с этими классами?

Нужно начинать с исправления знаний о вложенных строках / таблицах.
Решение с другого ресурса + небольшая доработка.

var $tbody = $('#js-lower-not tbody');

$tbody.find('tr').not('.premium, tr.premium-child').each(function() {
  $tbody.append( $(this) );
});


Вопрос решен. Всем пытавшимся подсказать - спасибо от души :)

laimas 22.03.2020 15:32

shareware, если речь о JQ, то явный цикл совсем не нужен.

shareware 22.03.2020 15:48

Цитата:

Сообщение от laimas (Сообщение 521608)
shareware, если речь о JQ, то явный цикл совсем не нужен.

Хм..а как бы сделали Вы ? Подскажите, возьму на заметочку. Заранее благодарен за помощь в "становлении на путь истинный" :)

laimas 22.03.2020 16:35

Цитата:

Сообщение от shareware
Хм..а как бы сделали Вы ?

Выше показано - взять коллекцию нужных элементов и разместить их в нужном месте, а цикл, это уже заботы JQ.

shareware 22.03.2020 16:53

Цитата:

Сообщение от laimas (Сообщение 521612)
Выше показано - взять коллекцию нужных элементов и разместить их в нужном месте, а цикл, это уже заботы JQ.

Если вы про
Код:

$('tr.premium').insertAfter('tbody')
, то для моей задачи верно будет так, получается -
Код:

$('.premium, tr.premium-child').insertBefore('tbody')
..с афтером не сработало, но это скорее вина моего восприятия между befor'ом и after'ом

laimas 22.03.2020 18:09

Цитата:

Сообщение от shareware
для моей задачи верно будет так, получается

У вас ошибки в таблице, это прежде всего нужно исправить, не может быть в теге TR вложенных TR.


Часовой пояс GMT +3, время: 08:12.