Javascript 在表格中反转tr

我现在有了这个代码，我特别想把这个表上的代码颠倒过来

<table border="1">
    <tr class="widget_view_row_even"><td>comment1</td></tr>
    <tr class="widget_view_row_even"><td>comment2</td></tr>
    <tr class="widget_view_row_even"><td>comment3</td></tr>
</table>

有人能给我提供javascript解决方案吗。谢谢

注意：我只是想用类widget\u view\u row\u甚至为表contain tr做相反的事情

需要支持：ie7+

类似于以下内容：

function query(sel, el) {
  return [].slice.call((el||document).querySelectorAll(sel));
}

var tables = query('table');

tables.forEach(function(table) {
  var widgets = query('tr.widget_view_row_even', table);
  widgets.reverse().forEach(function(widget) {
    table.appendChild(widget);
  });
});

---

演示：

最纯粹、最简单的javascript解决方案，使用：

var table=document.getElementById（'table'），
行=表。行；
对于（变量i=0；i

---

演示：我找到了问题的最接近的解决方案。 请使用相同的想法更正代码，使其更好

js小提琴：

var table = document.getElementsByTagName('table');

for (var i = 0; i < table.length; i++) {
    var rows = table[i].rows;
    for (var j = 0; j < rows.length; j++) {
        if(rows[j].className == "widget_view_row_even")
            rows[j].parentNode.insertBefore(rows[rows.length-1], rows[j]);
    }
}

var table=document.getElementsByTagName（'table'）；
对于（变量i=0；i

最好的方法是使用JSON。并反转json对象，然后渲染它 使用javascript

谢谢 嗯

var commentObj={0:“comment1”，1:“comment2”，2:“comment3”}//你的数据
函数renderRows（修订版）{
变量行=''，键=[]；
对于（commentObj中的var k）{keys.push（k）；}
如果（rev==1）{
键。反转（）；
}
for（键中的变量i）{
行+=''+commentObj[键[i]]+''；
}
document.getElementById（'tbl_cmnt'）。innerHTML=''+行+''；
}
renderRows（）；

我只使用了一种方法。 可能还有更多。我们也可以使用数组，这很简单。 但大多数应用程序都以json格式发送响应

---

---

Best Mahavir:）

您的目标浏览器是什么？任何浏览器。实际上，我应该严格使用javascript而不是jquery Library任何浏览器还是所有浏览器？这不是完美的答案，我们正在硬编码为第0个元素，但我需要特定的元素tr，该元素具有类。widget\u view\u row\u请细化您的问题。这个答案提供了OP想要的，一个更改所有表的脚本+1查询功能适用于哪个ie版本？

querySeletorAll

IE8+，

forEach

IE9+IE7？！然后使用jQuery，这是避免头痛的最好方法。@DontVoteMeDown好的。这里更新太多了。也就是说，如果susheel在发帖前准备了更多细节的问题，这种情况就不会那么令人困惑了。是的，需要两天时间来接受我们自己的回答。很高兴你解决了这个问题，但你至少可以对原始想法的作者说声谢谢。哦，是的，没关系，有趣的是：）我对你的答案投了更高的票，这就是我所感谢的：）我也对你的答案投了更高的票，认为答案更完整。和平好主意，这将是伟大的详细阐述一点（解释，代码样本等）。想法是好的，但这不是我的要求。我无法更改注释代码，因为它是cms框架（hp interwoven teamsite）。这样做是为了共享基于数据的方法。增强功能：

var commentObj=['comment1'，'comment2'，'comment3']

。

function query(sel, el) {
  return [].slice.call((el||document).querySelectorAll(sel));
}

var tables = query('table');

tables.forEach(function(table) {
  var widgets = query('tr.widget_view_row_even', table);
  widgets.reverse().forEach(function(widget) {
    table.appendChild(widget);
  });
});

var table = document.getElementById('table'),
    rows = table.rows;

for (var i = 0; i < rows.length; i++) {
    rows[i].parentNode.insertBefore(rows[rows.length-1], rows[i]);
}

var table = document.getElementsByTagName('table');

for (var i = 0; i < table.length; i++) {
    var rows = table[i].rows;
    for (var j = 0; j < rows.length; j++) {
        if(rows[j].className == "widget_view_row_even")
            rows[j].parentNode.insertBefore(rows[rows.length-1], rows[j]);
    }
}

<a href="javascript:void(0);" onclick="renderRows(1);">Desc</a> 
<a href="javascript:void(0);" onclick="renderRows();">Asc</a>
<div id="tbl_cmnt"></div>

<script type="text/javascript">
var commentObj = {0:"comment1",1:"comment2",2:"comment3"}; //your data
function renderRows(rev){
    var rows='', keys = [];

    for(var k in commentObj){ keys.push(k); }
    if(rev==1){
        keys.reverse();
    }
    for(var i in keys){
        rows += '<tr class="widget_view_row_even"><td>'+commentObj[keys[i]]+'</td></tr>';
    }
    document.getElementById('tbl_cmnt').innerHTML = '<table border="1">'+rows+'</table>';
}
renderRows();
</script>