反转表行最上面一行的底部去没有改变日HOW的位置？

Question

我使用的HTML代码。我有一个表，我写在第一TR TD“A”，并在第二TR TD“B”我有这两个行，但我想在第二打印“B”在第一TR和“A” !!但我不想改变我个位置！是否有可能与像JS或Jquery的或与任何类型的JS CDN任何脚本....？

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

Answer 1

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

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>

Answer 2

试试这个：您的脚本

$(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());

我希望这有帮助！谢谢！

Answer 3

既然你可以使用反向（）的一个数组，你可以使用get（）这首先转换成数组。如果你有行的动态数量，你可以使用这样的：

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

Answer 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>

Answer 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>

Answer 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>

谢谢大家

Answer 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值是0，这种情况下，其中n + 1为1。