Wechseln Sie tabellähnliche Elemente Reihenfolge

Question

Ich habe eine Reihe von Divs-Tabellen (mit Zeilen und Cols), um eine Fußballtabelle anzuzeigen. Jetzt muss ich in der Lage sein, diese Tabelle gemäß dem gewählten Schlüssel zu bestellen, ohne die Seite zu aktualisieren und die Verwendung von AJAX zu vermeiden.

Da ich genauer gesagt bin, muss ich die Werte in jedem "Columm" an den gewählten Schlüssel verfolgen und die Tabelle neu bestellen.

Ich benutze JQuery, daher sollte die Arbeit ziemlich einfach sein, nur nicht sicher, wie ein Array mit der ID des Teams und der Kolumne ausgerichtet werden soll. Die Tabellenwerte sind übrigens alle numerisch.

Unten finden Sie ein Beispiel für das Markup (Zeile):

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

Irgendwelche Gedanken?

Answer 1

Angenommen, Sie haben eine Reihe von Objekten, bei denen jedes Objekt einer Tabellenzeile entspricht und jedes Objekt Eigenschaften enthält, die Tabellenspalten entsprechen.

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

Wenn Sie Ihre Daten so angeordnet haben, können Sie eine Funktion erstellen, in der Sie einfach sagen können drawTable(table) Und es wird das gewünschte HTML -Markup erstellen. Sie können dann diese Variable wie folgt sortieren:

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