перестановка tr

Question

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

Задача: необходимо все 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 работает идеально, но если их двое и более - начинается мракобесие

Answer 1

Взять все элементы .premium и начиная с последнего, по очереди перенести вверх.

let tbody = document.querySelector('#js-hoist-premium tbody');

let prems = tbody.querySelectorAll('.premium');
for( let i = prems.length - 1; i >= 0; i-- ) {
  tbody.insertAdjacentElement('afterBegin', prems[i]);
}

td {
  width: 100px;
  border: 2px solid grey;
}

.premium td {
  border: 2px solid orange;
}

<table id="js-hoist-premium">
  <tbody>
    <tr class="not"><td>0</td></tr>
    <tr class="premium"><td>1</td></tr>
    <tr class="not"><td>2</td></tr>
    <tr class="not"><td>3</td></tr>
    <tr class="premium"><td>4</td></tr>
    <tr class="premium"><td>5</td></tr>
    <tr class="not"><td>6</td></tr>
    <tr class="premium"><td>7</td></tr>
    <tr class="not"><td>8</td></tr>
    <tr class="premium"><td>9</td></tr>
  </tbody>
</table>

Вместо этого можно было наоборот, не трогать премиум, и взять все элементы без этого класса, перенести их в конец. Пример уже на jQuery:

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

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

td {
  width: 100px;
  border: 2px solid grey;
}

.premium td {
  border: 2px solid orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="js-lower-not">
  <tbody>
    <tr class="not"><td>0</td></tr>
    <tr class="premium"><td>1</td></tr>
    <tr class="not"><td>2</td></tr>
    <tr class="not"><td>3</td></tr>
    <tr class="premium"><td>4</td></tr>
    <tr class="premium"><td>5</td></tr>
    <tr class="not"><td>6</td></tr>
    <tr class="premium"><td>7</td></tr>
    <tr class="not"><td>8</td></tr>
    <tr class="premium"><td>9</td></tr>
  </tbody>
</table>

БЛОГ НА HUSL

перестановка tr

Ответы (1 шт):