反转表格行答案

【问题标题】：Invert table rows反转表格行
【发布时间】：2013-05-18 02:08:50
【问题描述】：

我想用 jQuery 反转表格 tbody 行。

我有什么：

<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
 <tr>
    <td>TITLE A</td>
    <td>TITLE B</td>

(...) 在 jsfiddle 中继续。

这里有什么我想要什么：http://jsfiddle.net/ZaUrP/1/

【问题讨论】：

请贴出您尝试过的代码。

标签： javascript jquery html-table jquery-selectors

【解决方案1】：

试试这个：-

使用.get() 从tbody 中获取trs 数组，并使用Array.reverse 反转元素并将其分配回去。

var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());

Fiddle

如果您有 tr 或任何包含元素的事件，您可以使用委托附加它，以便反向元素也获得委托。

Demo

【讨论】：

如果您有任何事件附加到表内的任何元素上，最好使用@DefyGravity 答案。

【解决方案2】：

fiddle

与其他人几乎相同，只是我使用 .detach() 来保证任何附加到 trs 的疯狂事件保持不变。我还使用 $.makeArray 来避免反转基本 jQuery 对象上的任何 proto 内容。

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});

【讨论】：

完全有效！！想要投票，但我的票用完了...... :(
这是一个很棒的答案。我修改了你的答案并创建了一个 jQuery 插件below。
这对我不起作用，因为我有一些使用 'rowspan' 跨越多行的单元格

【解决方案3】：

$('tbody').each(function(){
    var list = $(this).children('tr');
    $(this).html(list.get().reverse())
});

演示-->http://jsfiddle.net/ZaUrP/5/

【讨论】：

.get()。惊人的。也 +1。
这非常适合对可见行进行就地排序！

【解决方案4】：

我编写了一个名为$.reverseChildren 的jQuery 插件，它将反转给定元素的所有指定子元素。感谢DefyGravity 对$.makeArray 的深刻而有趣的使用。

我不仅反转了表格的行，还反转了列。

(function($) {
  $.fn.reverseChildren = function(childSelector) {
    this.each(function(el, index) {
      var children = $.makeArray($(childSelector, this).detach());
      children.reverse();
      $(this).append(children);
    });
    return this;
  };
}(jQuery));

$(function() {
  var tableCopy = $('#myTable').clone(true).attr('id', 'myTableCopy').appendTo(
    $('body').append('<hr>').append($('<h1>').html('Reversed Table')));

  tableCopy.find('tr').reverseChildren('th, td'); // Reverse table columns
  tableCopy.find('tbody').reverseChildren('tr');  // Reverse table rows
});

*     { font-family: "Helvetica Neue", Helvetica, Arial; }
h1    { font-size: 16px;         text-align: center;     }
table { margin: 0 auto;                                  }
th    { background: #CCC;        padding: 0.25em;        }
td    { border: 1px solid #CCC;  padding: 5px;           }
hr    { margin: 12px 0;                                  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Original Table</h1>

<table id="myTable" width="320" border="0" cellspacing="0" cellpadding="0">
    <thead>
        <tr> <th>Header A</th> <th>Header B</th> <th>Header C</th> </tr>
    </thead>
    <tbody>
        <tr> <td>Data 1A</td>  <td>Data 1B</td>  <td>Data 1C</td>  </tr>
        <tr> <td>Data 2A</td>  <td>Data 2B</td>  <td>Data 2C</td>  </tr>
        <tr> <td>Data 3A</td>  <td>Data 3B</td>  <td>Data 3C</td>  </tr>
        <tr> <td>Data 4A</td>  <td>Data 4B</td>  <td>Data 4C</td>  </tr>
    </tbody>
</table>

【讨论】：

【解决方案5】：

我知道这已经晚了，但它可以帮助其他一些用户寻找答案

function reverseTable() {
  var table = document.getElementById("table")
  var trContent = []
  for (var i = 0, row; row = table.rows[i]; i++) {
    trContent.push(row.innerHTML)
  }
  trContent.reverse()
  for (var i = 0, row; row = table.rows[i]; i++) {
    row.innerHTML = trContent[i]
  }
}

table {border-collapse: collapse}
table, td {border: 1px solid black}

<html>
  <body onload="reverseTable()">

  Original Table
  <table>
    <tbody>
      <tr>
        <td>Cell 1,1</td>
        <td>Cell 1,2</td>
        <td>Cell 1,3</td>
      </tr>
      <tr>
        <td>Cell 2,1</td>
        <td>Cell 2,2</td>
        <td>Cell 2,3</td>
      </tr>
      <tr>
        <td>Cell 3,1</td>
        <td>Cell 3,2</td>
        <td>Cell 3,3</td>
      </tr>
    </tbody>
  </table>

  <br>

  Reversed Table
  <table id="table">
    <tbody>
      <tr>
        <td>Cell 1,1</td>
        <td>Cell 1,2</td>
        <td>Cell 1,3</td>
      </tr>
      <tr>
        <td>Cell 2,1</td>
        <td>Cell 2,2</td>
        <td>Cell 2,3</td>
      </tr>
      <tr>
        <td>Cell 3,1</td>
        <td>Cell 3,2</td>
        <td>Cell 3,3</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

【讨论】：