Обратный стол td в порядке возрастания или убывания в зависимости от дат

Question

У меня есть таблица, в которой дата отображается в порядке убывания, теперь у меня будет кнопка, на которой я пытаюсь перевернуть td, чтобы таблица отображала результат в обратном порядке, кроме первого tr

var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  //alert();
  $('#tblResult tr').each(function() {
    $('td:not(:first-child)', this).remove().insertAfter($('td:last', this));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button>Sort</button>

  <br />
  <table id="tblResult" class="table bordered">
    <tbody>
      <tr>
        <td>Result</td>
        <td>03/03/20</td>
        <td>02/06/20</td>
        <td>01/23/20</td>
      </tr>
      <tr>
        <td>XYZ</td>
        <td>30</td>
        <td>50</td>
        <td>60</td>
      </tr>
      <tr>
        <td>Physics</td>
        <td>80</td>
        <td>75</td>
        <td>60</td>
      </tr>
    </tbody>
  </table>

При первом запуске он будет отображаться, как показано ниже

Result  03/03/20    02/06/20    01/23/20
 XYZ     30           50          60
 ABC     80           75          60

Ожидаемый результат:

Result  01/23/20    02/06/20    03/03/20
 XYZ     60           50          30
 ABC     60           75          80

Я пробовал чтобы использовать этот пример, но не удалось получить

http://jsfiddle.net/QEuxN/1/

Answer 1

Здесь вам нужно перевернуть tds вашей таблицы, когда что-то щелкают. Попробуйте приведенный ниже код. Это изменит временную шкалу таблицы при нажатии кнопки.

$(document).ready(function(){
  $("button").click(function(){
    Reverse();
  });
  
  
});

function Reverse()
{
var newTableTrs='';
$('#table1 tr').each(function (i, row) {
         
        var newRowContent=''; 
        var firstTd='';
        $(row).children('td').each(function (j,td) {
        if(j!=0)
        {
        newRowContent=td.outerHTML+newRowContent;
        }
        else
        {
        firstTd=td.outerHTML;
        }
        });
        newRowContent=firstTd+newRowContent;
        newTableTrs=newTableTrs+'<tr>'+newRowContent+'</tr>';
 
 });
 
$('#table1').html(newTableTrs);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
     <tbody>
      <tr>
        <td>Result</td>
        <td>03/03/20</td>
        <td>02/06/20</td>
        <td>01/23/20</td>
      </tr>
      <tr>
        <td>XYZ</td>
        <td>30</td>
        <td>50</td>
        <td>60</td>
      </tr>
      <tr>
        <td>Physics</td>
        <td>80</td>
        <td>75</td>
        <td>60</td>
      </tr>
    </tbody>
</table>

<button>Click me to reverse table tds!</button>