Question

我使用HTML代码。我有一张桌子，我在第二个tr td中写了第一个tr td“ A”和“ B” 我有这两行但我想在第一行打印“ 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>

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

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

Answer 2

由于可以对数组使用reverse（），因此可以使用get（）首先将其转换为数组。如果您拥有动态的行数，则可以使用以下内容：

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

Answer 3

使用以下代码：

$(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 4

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

这意味着您不需要将所有行都加载到数组中，而是意味着需要进行其他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 5

您可以交换.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 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 + 1为1的情况，您可以将n的值设置为0。

反向表行的顶部行在底部不改变th的位置，怎么办？

7 个答案: