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

Methode und Einführung der Tabellenindexdefinition in MySQL

Überblick Ein Index ist eine vom DBMS basierend a...

So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten

Manche Webseiten erscheinen möglicherweise nicht ...

Transplantieren des Befehls mkfs.vfat in Busybox unter Linux

Um die Lebensdauer der Festplatte zum Speichern v...

Vue3 (III) Website Homepage Layout Entwicklung

Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...

So aktivieren Sie den Fernzugriff in Docker

Docker-Daemon-Socket Der Docker-Daemon kann über ...

Zusammenfassung häufiger Probleme mit MySQL-Indizes

F1: Welche Indizes hat die Datenbank? Was sind di...

So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux

Zeichensatzfehler treten immer auf Gebietsschema:...

Detaillierte Erklärung des Linx awk-Einführungstutorials

Awk ist eine Anwendung zur Verarbeitung von Textd...

Detaillierte Erklärung zur Installation von PHP7 unter Linux

Wie installiere ich PHP7 unter Linux? 1. Installi...

Verwendung der Zabbix-API in einer Linux-Shell-Umgebung

Sie können es direkt in der Linux-Shell-Umgebung ...