Question

如何将td带到桌面顶部？我有这样的事情：

    <table>
    <tr><td>...</td></tr>
    <tr>
    <td id="pp" class="text-right"><!-- I want this td in the top of table when a is clicked-->
        <a ...>
        <i class=""></i>
        </a>
    </td>
    </tr>
<tr><td>...</td></tr>
</table>

Answer 1

一种方法是使用jQuery＆＃39; prepend()将所需的<tr>（行）移动到表格的顶部。
请注意：

如果将以这种方式选择的单个元素插入DOM中其他位置的单个位置，则会将其移动到目标中（未克隆）。

但是，如果有多个目标元素，则将为每个目标创建插入元素的克隆副本，但最后一个目标除外。

在我的示例中，我使用closest()从点击的<td>遍历到其包含的<tr>，以便可以移动整个行。

＆＃13;

jQuery('#pp').on('click', function() {
  jQuery(this).closest('tr').prependTo('table');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
  <tr><td id="pp"><a><i class="">click to move this row to the top</i></a></td></tr>
  <tr><td>...</td></tr>
</table>

＆＃13;

Answer 2

你必须将整个tr移到顶部。你可以找到相对于链接的closest tr，然后prepend到你的桌子：

$("#pp a").on('click', function(){
    var tr = $(this).closest('tr');
    tr.prependTo(tr.closest('table'))
});

See fiddle

把td带到桌子的顶部

2 个答案: