Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2020, 11:24
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Перестановка 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 работает идеально, но если их двое и более - начинается мракобесие
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2020, 12:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$('tr.premium').insertAfter('tbody')
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2020, 13:20
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

const body = document.querySelector('tbody');
body.querySelectorAll('tr.premium').forEach( tr => tbody.appendChild(tr) );
body.querySelectorAll('tr.not').forEach( tr => tbody.appendChild(tr) );
Ответить с цитированием
  #4 (permalink)  
Старый 22.03.2020, 13:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от shareware
class="not-child"
Сообщение от shareware
class="premium-child"
может сначала исправить строки с этими классами?
Ответить с цитированием
  #5 (permalink)  
Старый 22.03.2020, 14:04
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

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

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

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


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

Последний раз редактировалось shareware, 22.03.2020 в 14:07.
Ответить с цитированием
  #6 (permalink)  
Старый 22.03.2020, 15:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

shareware, если речь о JQ, то явный цикл совсем не нужен.
Ответить с цитированием
  #7 (permalink)  
Старый 22.03.2020, 15:48
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от laimas Посмотреть сообщение
shareware, если речь о JQ, то явный цикл совсем не нужен.
Хм..а как бы сделали Вы ? Подскажите, возьму на заметочку. Заранее благодарен за помощь в "становлении на путь истинный"
Ответить с цитированием
  #8 (permalink)  
Старый 22.03.2020, 16:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от shareware
Хм..а как бы сделали Вы ?
Выше показано - взять коллекцию нужных элементов и разместить их в нужном месте, а цикл, это уже заботы JQ.
Ответить с цитированием
  #9 (permalink)  
Старый 22.03.2020, 16:53
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от laimas Посмотреть сообщение
Выше показано - взять коллекцию нужных элементов и разместить их в нужном месте, а цикл, это уже заботы JQ.
Если вы про
Код:
$('tr.premium').insertAfter('tbody')
, то для моей задачи верно будет так, получается -
Код:
$('.premium, tr.premium-child').insertBefore('tbody')
..с афтером не сработало, но это скорее вина моего восприятия между befor'ом и after'ом
Ответить с цитированием
  #10 (permalink)  
Старый 22.03.2020, 18:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от shareware
для моей задачи верно будет так, получается
У вас ошибки в таблице, это прежде всего нужно исправить, не может быть в теге TR вложенных TR.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск по таблице и перестановка строк KemPavel jQuery 2 19.10.2015 12:28
Перестановка элементов на странице + цикл DS_ Общие вопросы Javascript 2 30.10.2012 11:15
Перестановка значений массива db_test Оффтопик 6 06.04.2012 16:26
перестановка элементов Sub-zerro jQuery 3 25.08.2010 18:02