反转表格行

Question

反转表格行

javascriptjqueryhtml-tablejquery-selectors

9

我希望你能用jQuery反转表格中的行。

现有情况：

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

- Programmeur Désespéré

2

请发布您尝试过的代码。 - j08691

5个回答

11

尝试这个：- 从中使用.get()获取数组，使用Array.reverse来反转元素并将其赋回。

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

Fiddle

如果您有事件处理程序要绑定到 tr 或它的任何包含元素上，您可以使用委托方式进行绑定，以便被反转的元素也能够获得它们。

演示

- PSL

2

如果您的表格中有任何元素附加的事件，最好使用@DefyGravity的答案。 - PSL

4

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

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

- Adil Shaikh

2

.get()。太棒了。+1也一样。 - DefyGravity

这对于原地排序可见行非常有效！ - Jamie M.

1

我写了一个叫做$.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>

- Mr. Polywhirl

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>

- Dominicentek Gaming

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DefyGravity · Accepted Answer

fiddle

基本上和另一个人一样，只不过我使用了.detach()，它可以保证保留任何附加到的疯狂事件。我还使用$.makeArray来避免反转jQuery对象基础部分的任何proto内容。

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