javascript - 使用 javascript 在类的基础上重新排列表格行

Question

例如，我有这个代码:

<table>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
</table>

我希望使用 javascript 进行这样的设置:

<table>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
</table>

我们所需要的是，javascript 应该检测类为“last”的 td 并将整个表格行移至表格底部。

Answer 1

var last = $( '.last' );
last.parent().parent().append( last.parent() );

JSFiddle Demo .

last.parent().parent() 是 table 元素，last.parent() 是 tr 元素。

append 移动 DOM 元素，因此它们不会被“复制”，而是被移动到末尾。