Инвертировать строки таблицы

Я хочу инвертировать строки таблицы с помощью 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/

Источник

4 ответа

Решение

играть на скрипке

почти так же, как и другой парень, только я использую.detach(), который гарантированно хранит любые сумасшедшие события, которые были прикреплены к tr без изменений. Я также использую $.makeArray, чтобы избежать реверсирования любого из proto вещи на базе объекта jQuery.

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});
Источник

Попробуй это:-

Получить массив trс из tbody с помощью .get() и используйте Array.reverse, чтобы инвертировать элементы и назначить их обратно.

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

скрипка

Если у вас есть события для tr или любые содержащие элементы, которые вы можете просто прикрепить, используя делегирование, чтобы обратные элементы также делегировали их.

демонстрация

Источник 
$('tbody').each(function(){
    var list = $(this).children('tr');
    $(this).html(list.get().reverse())
});

демонстрация --> http://jsfiddle.net/ZaUrP/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>

Источник

Я написал плагин 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>

Источник
Другие вопросы по тегам