jQuery 在 tr 标题后添加 tr

Question

我有以下 HTML table.

<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 的 class。顾名思义，我想将所有 tr 和 show-on-top 移动到 table 之上。我可以使用以下代码来做到这一点。

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

但问题是伦敦、巴黎和罗马显示在 <th>（“城市”标题）之前。当然，我想将 show-on-top 行放在 table 的顶部，但 在标题 之后（第一行）。所以我想出了以下想法。

$("#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>

jQuery 在 tr 标题后添加 tr

jQuery prepend tr after tr heading

html

sorting

jquery

prepend