Javascript 反转表行

我想用jQuery反转表tbody行

我所拥有的：

<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
 <tr>
    <td>TITLE A</td>
    <td>TITLE B</td>

标题A
标题B

（…）在JSFIDLE中继续

这里是我拥有的和我想要的：

试试这个：-

使用

.Get（）

从

tbody

获取

tr

s的数组，并用于反转元素并将其重新分配

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

如果您有要

tr

的事件或任何包含元素的事件，您可以使用委托将其附加，以便反向元素也可以将其委托

与另一个家伙几乎相同，只是我使用了.detach（），它可以保证所有附加到

tr

s的疯狂事件保持不变。我还使用$.makeArray来避免反转基本jQuery对象上的任何

proto

内容

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

---

演示

-->

我编写了一个名为

$的jQuery插件。reverseChildren

将反转给定元素的所有指定子元素。这要归功于他对

$.makeArray

的深刻而有趣的使用

我不仅反转了表中的行，还反转了列

（函数（$）{
$.fn.reverseChildren=函数（儿童选择器）{
每个函数（el、索引）{
var children=$.makeArray（$（childSelector，this.detach（））；
儿童。反向（）；
$（此项）。附加（子项）；
});
归还这个；
};
}（jQuery））；
$（函数（）{
var tableCopy=$（'#myTable'）.clone（true）.attr（'id'，'myTableCopy'）.appendTo(
$（'body'）.append（'
）.append（$（'.html（'Reversed Table'））；
tableCopy.find（'tr'）.reverseChildren（'th，td'）；//反转表列
tableCopy.find（'tbody'）.reverseChildren（'tr'）；//反转表行
});
*{字体系列：“Helvetica Neue”，Helvetica，Arial；}
h1{字体大小：16px；文本对齐：居中；}
表{margin:0 auto；}
th{背景：#CCC；填充：0.25em；}
td{border:1px solid#CCC；padding:5px；}
hr{margin:12px 0；}

原始表格
标题A标题B标题C
数据1A数据1B数据1C
数据2A数据2B数据2C
数据3A数据3B数据3C
数据4A数据4B数据4C
我知道这已经晚了，但它可以帮助其他用户寻找答案


function reverseTable（）{
var table=document.getElementById（“表”）
var trContent=[]
for（变量i=0，行；行=表。行[i]；i++）{
trContent.push（row.innerHTML）
}
trContent.reverse（）
for（变量i=0，行；行=表。行[i]；i++）{
row.innerHTML=trContent[i]
}
}
表{边框折叠：折叠}
表，td{边框：1px纯黑}

原始表格
细胞1,1
单元格1,2
细胞1,3
细胞2,1
细胞2,2
细胞2,3
单元格3,1
单元格3,2
单元格3,3


倒桌
细胞1,1
单元格1,2
细胞1,3
细胞2,1
细胞2,2
细胞2,3
单元格3,1
单元格3,2
单元格3,3
请发布您尝试过的代码。完全有效！！我想投这一票，但我没票了…：（这是一个很棒的答案。我修改了你的答案并创建了一个jQuery插件。这对我不起作用，因为我有一些单元格使用“rowspan”跨越多行如果你有任何事件附加到表中的任何元素，最好使用@DefyGravity answer..get（）.awesome.+1。这对于在适当位置对可见行进行排序非常有效！
$('tbody').each(function(){
    var list = $(this).children('tr');
    $(this).html(list.get().reverse())
});