jQuery 在 tr 标题之后添加 tr
Posted
技术标签:
【中文标题】jQuery 在 tr 标题之后添加 tr【英文标题】:jQuery prepend tr after tr heading 【发布时间】:2020-07-10 22:53:40 【问题描述】:我有以下 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()
中什么都看不到。
感谢您的宝贵时间。
【问题讨论】:
考虑将您的标题放在<thead>
,而不是<tbody>
。它可能会对您的问题有所帮助,并且在语义上更正确。
如果您使用.before()
而不是.prepend()
,您的第一个解决方案将有效。
【参考方案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>
【讨论】:
【参考方案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将Class添加到表内每个tr中的第一个td
使用 jquery 和 js 将 <td> 元素动态添加到 <tr> 元素中