javascript - 将 td 置于表格顶部

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 的 prepend() 移动所需的<tr> (行)到表格顶部。
请注意:

If a single element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).

If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

在我的示例中，我使用 closest() 从点击的<td>开始遍历其包含 <tr>这样整行都可以移动。

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

<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>