Question

我想用jQuery反转表 tbody rows 。

我有什么：

<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/

Answer 1

fiddle

和其他人几乎一样，只有我使用.detach（）才能保持与tr完整无关的任何疯狂事件。我还使用$ .makeArray来避免反转基础jQuery对象上的任何proto内容。

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

Answer 2

试试这个： -

使用tr从tbody获取.get()数组，然后使用Array.reverse反转元素并将其分配回来。

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

Fiddle

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

Demo

Answer 3

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

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

Answer 4

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

我不仅颠倒了表格的行，还改变了列。

＆＃13;

(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
});

＆＃13;

*     { 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;                                  }

＆＃13;

<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>

＆＃13;

Answer 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>

反转表行

5 个答案:

Fiddle

Demo