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元素，因此它们不会被“复制”，它们会移动到最后。

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'))
  }
})

DEMO

使用javascript重新排列基于类的表行

4 个答案: