Altere os itens semelhantes à mesa Pedido

Question

Eu tenho um conjunto de tabela Divs (com linhas e cols), para exibir uma mesa de futebol. Agora, preciso poder pedir essa tabela de acordo com a chave escolhida, sem atualizar a página e evitar o uso do AJAX.

Sendo mais específico, preciso capturar os valores dentro de cada "Columm" referindo à chave escolhida e reordenar a tabela.

Eu uso o jQuery, então o trabalho deve ser bastante fácil, mas não tenho certeza de como reordenar uma matriz com o ID da equipe e a coluna em causa. Os valores da tabela são todos numéricos a propósito.

Abaixo está um exemplo da marcação (linha):

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

Alguma ideia?

Answer 1

Digamos que você tenha uma variedade de objetos, onde todos os objetos correspondem a uma linha de tabela e cada objeto possui propriedades correspondentes às colunas da tabela.

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

Agora, se você recebeu seus dados assim, você pode criar uma função onde você pode apenas dizer drawTable(table) E criará a marcação HTML que você deseja. Você pode então fazer classificação nessa variável, assim:

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});