I'm trying to locally edit the order of an element within a table so that whenever I open the webpage the table shows the order I want. Using Chrome's element inspector I was able to change the order by dragging these elements and arranging them. Is there any script that helps me maintain this desired order without having to manually change it every time?
Original table structure:
<table class="zebra" id="gamesTable">
<tbody>
<tr class="platinum" data-psnpp-processed="true"> (element 1)
<tr class="platinum" data-psnpp-processed="true"> (element 2)
<tr class="platinum" data-psnpp-processed="true"> (element 3)
</tbody>
<table>
Desired table structure:
<table class="zebra" id="gamesTable">
<tbody>
<tr class="platinum" data-psnpp-processed="true"> (element 2)
<tr class="platinum" data-psnpp-processed="true"> (element 1)
<tr class="platinum" data-psnpp-processed="true"> (element 3)
</tbody>
<table>
Is there any way to run this locally edit using scripts?
You can add data-order to the rows and then sort it with javascript. Try this
<table class="zebra" id="gamesTable">
<tbody>
<tr class="platinum" data-psnpp-processed="true" data-order="2"> <td>(element 1)</td></tr>
<tr class="platinum" data-psnpp-processed="true" data-order="1"> <td>(element 2)</td></tr>
<tr class="platinum" data-psnpp-processed="true" data-order="3"> <td>(element 3)</td></tr>
</tbody>
</table>
<script>
let parent = document.querySelector("#gamesTable tbody");
let rows = parent.querySelectorAll("tr");
let sorted = Array.from(rows).sort(function(a, b) {
let c = a.dataset.order, d = b.dataset.order;
return c < d ? -1 : c > d ? 1 : 0;
});
sorted.forEach(item => parent.append(item));
</script>