Modifica l'ordine degli articoli simili a tabelle

Question

Ho una serie di div simili a una tabella (con righe e colonne), per visualizzare un tavolo da calcio. Ora, devo essere in grado di ordinare quella tabella in base alla chiave scelta, senza aggiornare la pagina ed evitare di usare ajax.

Essendo più specifico, ho bisogno di catturare i valori all'interno di ogni "colonna". refeering della chiave scelta e riordinare la tabella.

Uso jQuery, quindi il lavoro dovrebbe essere abbastanza semplice, non so come riordinare un array con l'id del team e la colonna in causa. I valori della tabella sono tutti numerici a proposito.

Di seguito è riportato un esempio del markup (riga):

<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>

Qualche idea?

Answer 1

Supponi di avere una matrice di oggetti, in cui ogni oggetto corrisponde a una riga della tabella e ogni oggetto ha proprietà corrispondenti alle colonne della tabella.

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

ora, se hai i tuoi dati disposti in questo modo, puoi creare una funzione in cui puoi semplicemente dire drawTable (table) e creerà il markup HTML che desideri. È quindi possibile eseguire l'ordinamento in quella variabile, in questo modo:

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);
});