Tengo una tabla simple en HTML como esta:
<table id="myTable"> <thead> <tr> <th class="pointer" onClick="sortTable()">Number</th> <th>Example3</th> <th>Example2</th> <th>Example1</th> </tr> </thead> <tbody> <tr> <td>101</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-01</td> </tr> <tr> <td>102</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-02</td> </tr> </tbody> </table>y función para ordenar esta tabla en javascript pero no funciona. Me gustaría ordenar la tabla descendiendo por número de columna. ¿Cómo arreglar esto? También me gustaría agregar una flecha al lado del nombre de la columna para llamar a la función haciendo clic en la flecha
function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 3].getElementsByTagName("TD")[0]; //check if the two rows should switch place: if (Number(x.innerHTML) > Number(y.innerHTML)) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 3], rows[i]); switching = true; } } }Si hubiera leído un poco más la página en la que estaba ( https://www.w3schools.com/howto/howto_js_sort_table.asp ), podría encontrar la respuesta a esta pregunta.
function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; // Set the sorting direction to ascending: dir = "asc"; /* Make a loop that will continue until no switching has been done: */ while (switching) { // Start by saying: no switching is done: switching = false; rows = table.rows; /* Loop through all table rows (except the first, which contains table headers): */ for (i = 1; i < (rows.length - 1); i++) { // Start by saying there should be no switching: shouldSwitch = false; /* Get the two elements you want to compare, one from current row and one from the next: */ x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /* Check if the two rows should switch place, based on the direction, asc or desc: */ if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; } } } if (shouldSwitch) { /* If a switch has been marked, make the switch and mark that a switch has been done: */ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; // Each time a switch is done, increase this count by 1: switchcount ++; } else { /* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } <table id="myTable"> <thead> <tr> <th class="pointer" onClick="sortTable(0)">Number</th> <th>Example3</th> <th>Example2</th> <th>Example1</th> </tr> </thead> <tbody> <tr> <td>101</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-01</td> </tr> <tr> <td>102</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-02</td> </tr> </tbody> </table>Aquí violín asociado: https://jsfiddle.net/Louf0sc7/
¿Por qué cambiar con filas [i + 3] y no filas [i + 1]? ¿Por qué romper el ciclo y no continuar hasta el final?
function sortTable() { var table, rows, switching, x, y; table = document.getElementById("myTable"); /*Make a loop that will continue until no switching has been done:*/ do { //start by saying: no switching is done: switching = false; rows = table.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (var i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 1].getElementsByTagName("TD")[0]; //check if the two rows should switch place: if (Number(x.innerHTML) > Number(y.innerHTML)) { //if so, mark as a switch switching = true; rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); rows = table.rows; } } // run until no switches } while (switching) } <table id="myTable"> <thead> <tr> <th class="pointer" onClick="sortTable()">Number</th> <th>Example3</th> <th>Example2</th> <th>Example1</th> </tr> </thead> <tbody> <tr> <td>101</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-01</td> </tr> <tr> <td>102</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-02</td> </tr> <tr> <td>100</td> <td>TOM</td> <td>Not Working</td> <td>AUTOMAT-00</td> </tr> </tbody> </table>