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 演示。

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

append 移动DOM 元素，因此它们不会被“复制”，它们被移动到最后。

Answer 2

你可以使用这个插件： http ://tablesorter.com/docs/#Demo

更高级的东西： http ://www.trirand.com/blog/jqgrid/jqgrid.html

Answer 3

试试这个...

$("table tr td.last").each(function () {
    $(this).parent().insertAfter($("table tr:last"));
});

Answer 4

试试这个：

$('td').each(function(){
  if ($(this).hasClass('another')) {
     $(this).insertBefore($('td:first'))
  }
})

演示