在不改变 th 的位置的情况下，反转表格行的顶部行到底部，如何？答案

【问题标题】：Reverse table rows top row go on bottom without change the position of th, HOW?在不改变 th 的位置的情况下，反转表格行的顶部行到底部，如何？
【发布时间】：2019-06-28 21:33:10
【问题描述】：

我使用 HTML 代码。我有一张桌子，我在第一个 tr td 中写“A”和第二个 tr td 中的“B” 我有这两行但我想在第一个 tr 中打印“B”，在第二个中打印“A” ！！但我不想改变我的立场！！是否可以使用 js 或 Jquery 之类的任何脚本或任何类型的 js CDN....？？

<table id='table1'>
 <tr>
  <th>name</th>
 </tr>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>

【问题讨论】：

jQuery 没有.reverse() 函数。你可以打电话给remove()tr:last-child然后append()它到桌子上：jsfiddle.net/khrismuc/ye1n93q5
如果我也有，那我该怎么办？
如果您要更改原始要求，您还需要更改原始问题的文本。
您应该使用格式正确的 HTML，在本例中为 <table><thead><tr><th>head</th></tr></thead><tbody><tr><td>A</td></tr></tbody></table>。 tr 可以出现在 tbody 中，但它不适合您使用它的方式。

标签： javascript jquery html-table

【解决方案1】：

试试这个：你的脚本

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

第二种方法是这样的：

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

我希望这会有所帮助！谢谢！

【讨论】：

请不要复制粘贴别人的答案（即使是缩进错别字...），至少不要回溯源代码。 stackoverflow.com/a/16701801/2181514
如果我也有，那我该怎么办？
th 你确定吗？你是说要改变表格列的顺序吗？

【解决方案2】：

您可以交换 <tr> 元素的 <td> 子元素的 .textContent

const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];

<table id='table1'>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>

【讨论】：

如果我也有，那我该怎么办？
@ShamsherSidhu 同样的过程也适用。您能否在问题中包含实际的 HTML 和预期结果，而不是添加到 cmets 问题中描述的原始要求？见stackoverflow.com/help/how-to-ask、stackoverflow.com/help/mcve
@ShamsherSidhu 编辑的 HTML 与原始问题的文本不一致。鉴于更新的 HTML，您可以在解构赋值 const {rows:[,{cells:[a]}, {cells:[b]}]} = table1 的索引 1 之前包含一个逗号 ,
@ShamsherSidhu 问题的标题不是问题。问题的文本仍然指出 “我有一张桌子，我在第一个 tr td 中写“A”和在第二个 tr 中写“B””。上一条注释中的代码处理包含一个额外的<tr> 作为<table> 元素的第一个子元素，并输出相同的结果。
@ShamsherSidhu 不确定你的意思。此评论 stackoverflow.com/questions/54528075/… 处的代码处理已编辑问题处更新的 HTML 并输出相同的结果。

【解决方案3】：

由于可以对数组使用 reverse()，因此可以先使用 get() 将其转换为数组。如果你有一个动态的行数，你可以使用这样的东西：

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

【讨论】：

【解决方案4】：

使用下面的代码：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
        <tbody>  
            <tr>
                <td>A</td>
               </tr>
               <tr>
                <td>B</td>
               </tr>
               <tr>
                  <td>C</td>
                 </tr>
          </tbody>

       </table>

【讨论】：

如果我也有，那我该怎么办？
然后将 jquery "tr" 改为 "th"

【解决方案5】：

您可以循环遍历每一行，从底部开始并将其添加到底部 - 这将反转行。

这意味着您不需要将所有行加载到数组中，但意味着额外的 DOM 操作。

var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
    tbl.find("tr").eq(i).appendTo(tbl);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
 <tr>  <td>A</td> </tr>
 <tr>  <td>B</td> </tr>
 <tr>  <td>C</td> </tr>
 <tr>  <td>D</td> </tr>
 <tr>  <td>E</td> </tr> 
</tbody></table>

【讨论】：

如果我也有，那我该怎么办？ '
为什么tr 中的内容会有所不同？正在移动的是tr。如果您有thead，那么它也没有什么区别，因为这已经正确地只对tbody 进行排序。
如果您确实需要跳过第一行而不是使用正确的 HTML，那么只需将 i>=0 更改为 i>=1（或多行）。

【解决方案6】：

问题已解决

   <script type="text/javascript">
    var trCount = $('#table1 tr').length;
    var $rows = [];
    for (var i = 0; i < trCount; i++) 
      $rows.push($('#table1 tr:last-child').remove());
    $("#table1 tbody").append($rows);
   </script>

谢谢大家

【讨论】：

【解决方案7】：

您可以使用纯香草 JS 来做到这一点，您不需要 jquery 或任何其他库。

function reverseOrder(table) {
	const rows = table.querySelector('tbody').children;
  const swaptemp = rows[0].children[0].innerHTML;
  rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
  rows[1].children[0].innerHTML = swaptemp;
}

const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);

<table id='table1'>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>

这只是您的用例的演示，您可以在 n+1 为 1 的情况下使用 n 的值为 0。

【讨论】：