javascript 反转表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16701671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invert table rows
提问by Hugo
I want to invert table tbody rowswith jQuery.
我想用 jQuery反转表格tbody 行。
WHAT I HAVE:
我有的：
<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>TITLE A</td>
<td>TITLE B</td>
(...) continue in jsfiddle.
(...) 在 jsfiddle 中继续。
Here what I have and what I want: http://jsfiddle.net/ZaUrP/1/
这里有我想要的：http: //jsfiddle.net/ZaUrP/1/
回答by DefyGravity
pretty much the same as the other guy, only I use .detach() which is guarunteed to keep any crazy events that were attached to the trs intact. I also use $.makeArray to avoid reversing any of the protostuff on the base jQuery object.
与其他人几乎相同，只有我使用 .detach() 来保证保持连接到trs 的任何疯狂事件完好无损。我还使用 $.makeArray 来避免反转proto基本 jQuery 对象上的任何内容。
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
回答by PSL
Try this:-
试试这个：-
Get the array of trs from tbodyusing .get()and use Array.reverseto reverse the elements and assign it back.
tr从tbodyusing获取s数组.get()并使用Array.reverse反转元素并将其分配回来。
var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());
Fiddle
小提琴
In case you have events to tror any containing elements you could just attach it using delegation, so that the reversed elements also get them delegated.
如果您有事件tr或任何包含元素，您可以使用委托将其附加，以便反向元素也可以委托它们。
Demo
演示
回答by Mohammad Adil
$('tbody').each(function(){
var list = $(this).children('tr');
$(this).html(list.get().reverse())
});
Demo -->http://jsfiddle.net/ZaUrP/5/
回答by Mr. Polywhirl
I wrote a jQuery plugin called $.reverseChildrenwhich will reverse all the specified children of a given element. Credit goes to DefyGravityfor his insightful and intriguing use of $.makeArray.
我编写了一个名为 jQuery 的插件$.reverseChildren，它将反转给定元素的所有指定子元素。幸得DefyGravity他的洞察力和有趣的使用$.makeArray。
I have not only reversed the rows of a table, but also the columns.
我不仅颠倒了表格的行，还颠倒了列。
(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>