9

我想用 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/

4

5 回答 5

32

小提琴

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

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});
于 2013-05-22T21:22:04.743 回答
10

尝试这个：-

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

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

小提琴

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

演示

于 2013-05-22T21:18:24.490 回答
4 
$('tbody').each(function(){
    var list = $(this).children('tr');
    $(this).html(list.get().reverse())
});

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

于 2013-05-22T21:23:45.247 回答
1

我编写了一个名为的 jQuery 插件$.reverseChildren，它将反转给定元素的所有指定子元素。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>

于 2015-04-02T12:48:28.613 回答
1

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

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>

于 2020-09-05T16:41:21.077 回答