Estoy tratando de editar localmente el orden de un elemento dentro de una tabla para que cada vez que abra la página web, la tabla muestre el orden que quiero. Usando el inspector de elementos de Chrome, pude cambiar el orden arrastrando estos elementos y organizándolos. ¿Hay algún script que me ayude a mantener este orden deseado sin tener que cambiarlo manualmente cada vez?
Estructura original de la mesa:
<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>Estructura de tabla deseada:
<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>¿Hay alguna forma de ejecutar esta edición localmente usando scripts?
Puede agregar data-order a las filas y luego ordenarlo con javascript. Prueba esto
<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>