Обратные строки таблицы верхней строки идут внизу без изменения положения th, КАК?

Question

Я использую код HTML.У меня есть таблица, и я пишу в первом tr td «A» и «B» во втором tr td У меня есть эти две строки, но я хочу напечатать «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

Решенная проблема

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

Вы можете сделать это с чистым ванильным 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.

Answer 3

Вы можете поменять местами .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 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

Используйте этот код ниже:

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

Поскольку вы можете использовать reverse () с массивом, вы можете использовать get (), чтобы сначала преобразовать его в массив.Если у вас динамическое количество строк, вы можете использовать что-то вроде этого:

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

Answer 7

Попробуйте: Ваш сценарий

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

Надеюсь, это поможет!Спасибо!