javascript - 反转表中的 tr

Question

这个问题已经有答案了:

How to move lists (3 个回答)

已关闭 9 年前。

我现在有了这个代码，我特别希望在这个表上进行反转。

<table border="1">
    <tr class="widget_view_row_even"><td>comment1</td></tr>
    <tr class="widget_view_row_even"><td>comment2</td></tr>
    <tr class="widget_view_row_even"><td>comment3</td></tr>
</table>

我需要

<table border="1">
    <tr class="widget_view_row_even"><td>comment3</td></tr>
    <tr class="widget_view_row_even"><td>comment2</td></tr>
    <tr class="widget_view_row_even"><td>comment1</td></tr>
</table>

我使用 jquery 来做到这一点，但我需要 javacript。

 $('table').html($('tr.widget_view_row_even').get().reverse());

有人可以给我提供 JavaScript 解决方案吗？谢谢

注意:我只是为了对包含 tr 和类 widget_view_row_even 的表执行相反的操作。

需要支持:ie7+

Answer 1

类似这样的事情:

function query(sel, el) {
  return [].slice.call((el||document).querySelectorAll(sel));
}

var tables = query('table');

tables.forEach(function(table) {
  var widgets = query('tr.widget_view_row_even', table);
  widgets.reverse().forEach(function(widget) {
    table.appendChild(widget);
  });
});

演示: http://jsfiddle.net/qyvML/3/