JavaScript-Studiennotizen (4) Tabellensortierung

Die in diesem Artikel implementierte Tabellensortierung kann grob in die folgenden Schritte unterteilt werden:
1. Holen Sie sich alle zu sortierenden Zeilen und verschieben Sie ihre Referenzen in ein Array
2. Gemäß den Bedingungen des Zu sortierende Zeilen Schreiben Sie die Vergleichsfunktion, die beim Sortieren des Arrays verwendet wird
3. Sortieren Sie das Array, das alle Zeilenreferenzen enthält
4. Schreiben Sie das sortierte Array in der angegebenen Reihenfolge zurück in das DOM und schreiben Sie die Zeilen, auf die das Array verweist zurück zum DOM

Wenn Sie mit der Verwendung von DOM zum Betreiben von Tabellen nicht vertraut sind, können Sie sich auf „Verwenden von DOM zum Schreiben browserkompatibler Tabellenoperationen“ beziehen. Wenn Sie mit der Array-Sortierung nicht vertraut sind, können Sie sich auf „Array-Sortierung und In“ beziehen Verwendung der Methode localeCompare() bei der Sortierung chinesischer Zeichen“, da die Verwendung von DOM zum Betreiben von Tabellen und Array-Sortierung die Grundlage der Tabellensortierung ist.
Schauen wir uns zunächst den in unserem Beispiel verwendeten Code an. Dieser Artikel analysiert ihn Schritt für Schritt gemäß den oben genannten Schritten:
1 var asc = true; //Alle zu sortierenden Elemente speichern Der referenzierte Container 3 Function Sorttable () {
4 // Alle zu sortierenden Zeilen abrufen
5 var Otable = document.GetelementByid ("Otable"); tBodies[0];
7 var allTr = oTBody.rows;
8 //Die zu sortierenden Zeilen in das zu sortierende Array einfügen
9 for(var i=0;i10 arrayTr.push(allTr[i]);
11 }
12 //Wenn es in aufsteigender Reihenfolge ist
13 if(asc){
14             arrayTr.sort( CompareFunc); 20 oTable.rows[0].title = "Klicken Sie, um die Tabelle in aufsteigender Reihenfolge zu sortieren";
21 asc = true;
22 }
23 //Weiter Die Zeilen folgen. Schreiben Sie die Zahlenfolge wieder um DOM arrayTr[ j]);
27 }
28 oTBody.appendChild(oFragment); Zuerst haben wir die Tags verwendet, um den Titelteil von zu trennen Aufgrund der Länge wird der HTML-Code nicht mehr angezeigt. Zweitens gibt es in „javaScript Advanced Programming“ kein Array sort()-Methode, daher kann sie nicht für die direkte Sortierung verwendet werden. Wir müssen uns noch mit dem Konzept der JS-Sammlungen befassen, aber dies ist nicht der Schwerpunkt dieses Artikels. Der wichtige Punkt hier ist, dass tBodies nicht direkt sortiert werden können.
Die Zeilen 13 bis 22 des Programms implementieren den dritten Schritt. Hier wird die spezifische Implementierung des zweiten Schritts ausgeblendet (wird im Folgenden ausführlicher erläutert). Aufgrund der spezifischen Methodenimplementierung gibt es kein umfassendes Verständnis des Programms. Es sollte auch beachtet werden, dass wir im Programm einen globalen Container zum Laden der sortierten Zeilen verwenden, sodass arrayTr nach der Ausführung der Funktion immer die letzte sortierte Zeilenreferenzsequenz enthält. Wenn wir zu diesem Zeitpunkt die Reihenfolge umkehren möchten, Wir müssen nur die Methode reverse( ) aufrufen, ohne das Array umgekehrt sortieren zu müssen.
Zeile 24 des Programms verwendet document.createDocumentFragment(), um ein Dokumentfragment abzurufen. documentFragment ist ein unvollständiges Dokumentobjekt, das hauptsächlich zum Speichern von Elementen verwendet wird, die noch nicht zum DOM-Baum hinzugefügt wurden. Als Cache für js-Operationen im DOM ist es sehr einfach zu verwenden. Es stellt die Änderungen im DOM sofort dar, anstatt jedes Mal, wenn das DOM ausgeführt wird, vom Client neu gezeichnet zu werden.
Schauen wir uns die spezifische Implementierung der Funktion an, die zur Implementierung unseres zweiten Schritts verwendet wird:
1 /**
2 * Vergleichsfunktion
3 * @param {Object} param1 Zeile 1 zum Vergleichen
4 * @param {Object} param2 Zeile 2 zum Vergleichen
5 * @return {Number} if param1 > ; param2 gibt 1 zurück
6 Wenn param1 == param2 gibt 0 zurück
7 Wenn param1 < param2 zurückgibt -1
8                     */
9 function CompareFunc(oTr1,oTr2){
10 var param1 = oTr1 .cells[0].childNodes[0].nodeValue;
11 var param2 = oTr2.cells[0].childNodes[0].nodeValue;
12 //Wenn beide Parameter vom Typ String sind
13          if(isNaN(param1) && isNaN(param2)){
14                                                    //Wenn Parameter 1 eine Zahl und Parameter 2 eine Zeichenfolge ist
17 if(! isNaN(param1) && isNaN(param2)){
18 return -1;
19 }
20 //Wenn Parameter 1 eine Zeichenfolge ist, ist Parameter 2 Zahlen
21 if(isNaN(param1) && !isNaN(param2)){
22 return 1;
23 }
24 //Wenn beide Parameter Zahlen sind
2 5    if(!isNaN( param1) && !isNaN(param2)){
26 if(Number(param1 ) > Number(param2)) return 1;
27 if(Number(param1) == Number(param2)) return 0;                                                                                                                                                                                                if (Number (param1) < Number (param2)) return - 1; )-Methode“, da wir die Art und Weise des Datenabrufs nur in den Zeilen 10 und 11 geändert haben.
Oben haben wir die Ideen und Methoden zum Sortieren einspaltiger Tabellen erläutert. Mit diesen Ideen können wir unser Programm problemlos erweitern, um die Tabellensortierung um weitere Funktionen zu implementieren.

Das Obige ist der Tabellensortierungsinhalt der JavaScript-Studiennotizen (4). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!