JavaScript Classificar tabela HTML

Freqüentemente, nos deparamos com situações em que queremos tornar nossas mesas interativas. Podemos querer classificá-los apenas por um clique na coluna ou qualquer outro método. HTML não tem recursos de programação, então temos que usar JavaScript para classificar uma tabela HTML. Infelizmente, não existe um método embutido que nos ajude a classificar o array. Portanto, escrevemos nosso método personalizado aproveitando os recursos de manipulação de DOM e funções de comparação. Este tutorial ensina como classificar tabelas HTML usando JavaScript.

Classificar tabelas HTML usando JavaScript

O método definido pelo usuário usa as duas funções auxiliares a seguir para classificar a matriz.

• getCellValue()

Uma função para obter o conteúdo de uma célula com base na linha da tabela e no índice da coluna.

Usamos a propriedade children da linha da tabela para selecionar a coluna ith usando tr.children[i] e então usamos sua propriedade innerText ou textContent para obter o conteúdo real armazenado. Depois de obter o conteúdo real em uma célula, podemos usar um comparador personalizado para comparar e classificar esses valores.

• comparer()

Uma função para comparar os valores de dois elementos em uma determinada tabela.

Primeiro obtemos o conteúdo das células usando a função getCellValue() com um índice de linha e coluna especificado. Em seguida, verificamos se ambos são inteiros ou strings válidos e, em seguida, os comparamos para encontrar a ordem correta.

Algoritmo

Código

const getCellValue = (tableRow, columnIndex) =>
    tableRow.children[columnIndex].innerText ||
    tableRow.children[columnIndex].textContent;

const comparer = (idx, asc) => (r1, r2) =>
    ((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
         el1 - el2 :
         el1.toString().localeCompare(el2))(
        getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));

// do the work...
document.querySelectorAll('th').forEach(
    th => th.addEventListener(
        'click', (() => {
          const table = th.closest('table');
          Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
              .sort(comparer(
                  Array.from(th.parentNode.children).indexOf(th),
                  this.asc = !this.asc))
              .forEach(tr => table.appendChild(tr));
        })));

Todos os principais navegadores suportam todos os métodos discutidos acima.