如何在 HTML 表中进行自定义“排序依据”？

Question

I'm new on Stackoverflow, I came here needing some help, This community really helped me programming stuff as a beginner, And I still am one!

I wanted to know how can I sort table in a custom order such as this site:

Image1

Image2

The reason why I want like that site because I'm making a league of legends table too but with only role and rank!

Answer 1

Here's a nice example of doing so!

Do this (It's already commented really nicely):

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 + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      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;
    }
  }
}

Basically switch two rows of a table based on their value until everything's done.

Also, here 'sa great stackoverflow answer providing an all around good answer!

Answer 2

You could code it from scratch using JavaScript or use a plugin like this: https://datatables.net/