JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<button>Reverse row order</button>

<table>
<thead>
<tr>
<th scope="col">Country/region</th>
<th scope="col">Change (millions of metric tons)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Africa</th>
<td class="xl72">-4.2</td>
</tr>
<tr>
<th scope="row">Brazil</th>
<td class="xl72">-3.2</td>
</tr>
<tr>
<th scope="row">Other South America</th>
<td class="xl72">-2.6</td>
</tr>
<tr>
<th scope="row">Ukraine</th>
<td class="xl72">-2.4</td>
</tr>
<tr>
<th scope="row">Russia</th>
<td class="xl72">-1.6</td>
</tr>
<tr>
<th scope="row">Middle East</th>
<td class="xl72">-1.5</td>
</tr>
<tr>
<th scope="row">Oceania</th>
<td class="xl72">-0.1</td>
</tr>
<tr>
<th scope="row">Other North America</th>
<td class="xl72">0.0</td>
</tr>
<tr>
<th scope="row">Other Asia</th>
<td class="xl72">0.1</td>
</tr>
<tr>
<th scope="row">Taiwan</th>
<td class="xl72">0.8</td>
</tr>
<tr>
<th scope="row">India</th>
<td class="xl72">3.2</td>
</tr>
<tr>
<th scope="row">U.S.</th>
<td class="xl72">5.8</td>
</tr>
<tr>
<th scope="row">Japan</th>
<td class="xl72">7.7</td>
</tr>
<tr>
<th scope="row">Other Europe</th>
<td class="xl72">8.0</td>
</tr>
<tr>
<th scope="row">European Union</th>
<td class="xl72">8.7</td>
</tr>
<tr>
<th scope="row">South Korea</th>
<td class="xl72">16.1</td>
</tr>
<tr>
<th scope="row">China</th>
<td class="xl73">46.5</td>
</tr>
</tbody>
</table>

JavaScript

var $flipper = $('button');
var $table = $('table');

$flipper.on('click', function(){
    var $tbody = $table.find('tbody');
    var $rows = $tbody.find('tr');
    $rows.each(function(){
        $row = $(this);
        $row.prependTo( $tbody );
    });
});