How to locally change order of elements in table using scripts?

Question

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?

Does [this](https://stackoverflow.com/questions/7742305/changing-the-order-of-elements) answer your question ? — RenaudC5, Apr 16 '22 at 18:22
@RenaudC5 I don't know exactly how to implement this information in my case. — Sebie8, Apr 16 '22 at 18:30

ruleboy21 · Answer 1 · 2022-04-16T19:41:06.680

0

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>

edited Apr 16 '22 at 19:41

answered Apr 16 '22 at 18:53

ruleboy21

5,510
4
17
34

It seems to me that your suggestion is perfect for my problem, but I am not able to apply it. Should I enter any information besides your first code snippet? – Sebie8 Apr 16 '22 at 19:38
@Sebie8 I've updated my answer. It's much simpler now. Just copy and replace the HTML you added to the question with my answer. – ruleboy21 Apr 16 '22 at 19:42
Unfortunately I cannot modify the site's HTML as I am not the owner. My only option is to modify locally so only my side sees the change. – Sebie8 Apr 16 '22 at 19:49
Since you can't change the code on the server, there is no way you can permanently change the default behavior in your browser. What you're asking is impossible. The only way is via the browser's devtools which is temporary. – ruleboy21 Apr 16 '22 at 19:56

How to locally change order of elements in table using scripts?

1 Answers1