jQuery добавить tr после заголовка tr

Question

У меня есть следующая таблица HTML.

<table id="table">
<tbody>
    <tr>
        <th>City</th>
    </tr>
    <tr>
        <td>Madrid</td>
    </tr>
    <tr class="show-on-top">
        <td data-order="3">London</td>
    </tr>
    <tr>
        <td>Berlin</td>
    </tr>
    <tr>
        <td data-order="1">Paris</td>
    </tr>
    <tr class="show-on-top">
        <td data-order="2">Rome</td>
    </tr>
</tbody>

В Лондоне, Париже и Риме есть класс с именем show-on-top. Как следует из названия, я хочу переместить все tr вместе с show-on-top поверх таблицы. Я могу сделать это с помощью следующего кода.

$("#table tbody").prepend($('.show-on-top'));

Но проблема в том, что Лондон, Париж и Рим отображаются перед <th> (заголовок «Город»). Конечно, я хочу разместить show-on-top строк поверх таблицы, но после заголовка (первая строка). Так что мне пришла в голову следующая идея.

$("#table tbody tr:eq(1)").prepend($('.show-on-top'));

Я почти у цели. Все мои show-on-top помещаются после заголовка, но они вложены в tr, как показано ниже.

<table id="table">
<tbody>
    <tr>
        <th>City</th>
    </tr>
    <tr>
        <tr class="show-on-top">
            <td data-order="3">London</td>
        </tr>
        <tr>
            <td data-order="1">Paris</td>
        </tr>
        <tr class="show-on-top">
            <td data-order="2">Rome</td>
        </tr>
    </tr>
    <tr>
        <td>Madrid</td>
    </tr>
    <tr>
        <td>Berlin</td>
    </tr>
</tbody>

Я не могу понять, как, черт возьми, все мои строки вложены в tr. Я пробовал сотни комбинаций parent, after, prepend, append безуспешно.

Бонусный вопрос . Строки show-on-top имеют атрибут data-order, представляющий порядок сортировки рассматриваемых строк (Париж> Рим> Лондон). Я использовал sort.data('order'), но ничего не происходит. Я даже ничего не вижу в console.log().

Спасибо за ваше время.

Answer 1

Единственное, что вы можете сделать, это переместить строки заголовков из <tbody> в <thead>

$("#table tbody").prepend($('.show-on-top'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Madrid</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="3">London</td>
    </tr>
    <tr>
      <td>Berlin</td>
    </tr>
    <tr>
      <td data-order="1">Paris</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="2">Rome</td>
    </tr>
  </tbody>
</table>

Другое решение - использовать .after(), чтобы поместить строки после последней строки, содержащей th.

$("#table tbody tr:has(th):last").after($(".show-on-top"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr>
      <th>City</th>
    </tr>
    <tr>
      <td>Madrid</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="3">London</td>
    </tr>
    <tr>
      <td>Berlin</td>
    </tr>
    <tr>
      <td data-order="1">Paris</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="2">Rome</td>
    </tr>
  </tbody>
</table>

Answer 2

Вы можете использовать селектор insertAfter() и :first

$(".show-on-top").insertAfter('#table tbody tr:first');

.show-on-top{ color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr>
      <th>City</th>
    </tr>
    <tr>
      <td>Madrid</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="3">London</td>
    </tr>
    <tr>
      <td>Berlin</td>
    </tr>
    <tr>
      <td data-order="1">Paris</td>
    </tr>
    <tr class="show-on-top">
      <td data-order="2">Rome</td>
    </tr>
  </tbody>
</table>