Sortierfunktion für HTML-Tabellen per Mausklick

Sortierfunktion für HTML-Tabellen per Mausklick

Effektbild:

1. Dateien importieren

 <script src="js/jquery-1.10.1.min.js"></script>  
<link rel="stylesheet" href="Öffentlich/css/jquery-ui.min.css">  
<script src="js/jquery-ui.min.js"></script>

2. Fügen Sie die sortierbare Klasse zum Element hinzu

 <tbody Klasse="sortierbar">  
   <tr></tr>  
   <tr></tr>   
</tbody>

3. Aktivieren und konfigurieren

 $(Funktion() {  
    $(".sortierbar").sortierbar({  
        Cursor: "bewegen",  
        Elemente: "tr", //Nur tr kann gezogen werden Opazität: 0,6, //Beim Ziehen beträgt die Transparenz 0,6  
        revert: true, //Beim Freigeben Animation hinzufügen update: function(event, ui) { //Nach dem Aktualisieren der Sortierung var categoryids = $(this).sortable("toArray");  
            var $dies = $(dies);  
        }  
    });  
    $(".sortable").disableSelection();  
});

Oben sehen Sie die vom Editor eingeführte Sortierfunktion für HTML-Tabellen per Mausziehen. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Linux-Systemreparaturmodus (Einzelbenutzermodus)

>>:  Umfassende Inventarisierung wichtiger Logdateien in MySQL

Artikel empfehlen

Detaillierte Beschreibung des Anwendungsszenarios für Javascript-Closure

Inhaltsverzeichnis 1. Abschluss 2. Szenarien für ...

Lösung für den MySQL-Fehlercode 1064

Wenn die Wörter in der SQL-Anweisung mit den Schl...

Entpackte Version der MySQL-Installation und aufgetretene Fehler und Lösungen

1 Installation Laden Sie die entsprechende entpac...

Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden

Methode 1: Ändern Sie die Datei .bashrc oder .bas...

Beispielcode für die benutzerdefinierte Scroll-Ansicht des WeChat-Applets

Miniprogramm Benutzerdefinierte Scroll-View-Bildl...

MySQL fügt schnell 100 Millionen Testdaten ein

Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...

Detaillierte Erklärung langer Transaktionsbeispiele in MySQL

Vorwort: Die Artikelserie „Erste Schritte mit MyS...

Funktionsüberladung in TypeScript

Inhaltsverzeichnis 1. Funktionssignatur 2. Funkti...

Konvertieren von XHTML-CSS-Seiten in Druckerseiten

In der Vergangenheit bedeutete das Erstellen eine...