Como classificar tabelas

Criar função de classificação

instância

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Criar um loop até que a condição seja satisfeita.
  nenhuma troca foi feita: */
  // Primeiro declare: não há linhas para trocar no momento:
    switching = false;
    rows = table.rows;
    /* Percorre todas as linhas da tabela (exceto a primeira, pois ela contém o cabeçalho da tabela): */
    /* Percorrer todas as linhas da tabela (exceto a primeira, pois ela contém o cabeçalho): */
    // Primeiro declare: a linha atual e a próxima linha não devem ser trocadas de posição:
      // Primeiro declarar que não deve haver nenhuma troca:
      /* Obtém os dois elementos que você deseja comparar, um da linha atual e outro da próxima linha: */
      /* Obter os dois elementos a serem comparados, um da linha atual e outro da próxima linha: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Verificar se as duas linhas devem ser trocadas de posição:
      else if (dir == "desc") {
        // Se deve trocar, marcar como necessário trocar e sair do ciclo atual
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Se marcado para troca, realiza a troca e marca como trocado: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Experimente você mesmo

Classifique a tabela clicando no cabeçalho

Clique em "Nome" para classificar pelo nome, clique em "País" para classificar pelo país.

A primeira vez que clicar, a ordem de classificação será ascendente (de A para Z).

Ao clicar novamente, a ordem de classificação será decrescente (de Z para A):

instância

<table id="myTable2">
<tr>
<!--当表头被点击时，运行 sortTable 函数，并传递一个参数，0 表示按姓名排序，1 表示按国家排序： -->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  dir = "asc";
  /* Cria um loop que continuará até que não haja mais linhas para trocar: */
  while (switching) {
  // Primeiro declare: não há linhas para trocar no momento:
    switching = false;
    rows = table.rows;
    /* Percorre todas as linhas da tabela (exceto a primeira, pois ela contém o cabeçalho da tabela): */
    for (i = 1; i < (rows.length - 1); i++) {
    // Primeiro declare: a linha atual e a próxima linha não devem ser trocadas de posição:
      shouldSwitch = false;
      /* Obtém os dois elementos que você deseja comparar, um da linha atual e outro da próxima linha: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Verifica se essas duas linhas devem ser trocadas de posição, com base na direção de ordenação, ascendente ou descendente: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        else if (dir == "desc") {
          // Se deve trocar, marca como para troca e sai do loop atual:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Se deve trocar, marca como para troca e sai do loop atual:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Se marcado para troca, realiza a troca e marca como trocado: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // A cada troca, este contador aumenta 1:
      switchcount ++;
    }
      /* Se não houve troca e a direção de ordenação é "ascendente", define a direção de ordenação como "descendente" e executa novamente o loop while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Experimente você mesmo

ordena a tabela por número

instância

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}

Experimente você mesmo