tablesort ist ein sehr nützliches jQuery-Plug-in zum Sortieren von Tabellen. Es unterstützt das Sortieren mehrerer Datentypen, identifiziert automatisch den Datentyp des Tabelleninhalts und ist sehr benutzerfreundlich.
Verwenden Sie jQuery Tablesort, um die HTML-Tabellenmethode zu implementieren:
1. Laden Sie jQuery- und Tablesort-Skripte herunter und referenzieren Sie die Skriptdatei in HTML:
<script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script>
2. Formatieren Sie die zu sortierende HTML-Tabelle:
a. Geben Sie die CCS-Klasse für die zu sortierende Tabelle an : class="sort-table"
b. Verwenden Sie die Tags „thead“ und „tbody“, um den Tabellenkopf und den Tabellenkörper zu markieren.
c Im Tabellenkopf „thead“ müssen Sie den Tag „th“ verwenden, um den Tabellenkopf zu definieren 🎜>Die formatierte HTML-Tabelle lautet wie folgt:
<table border=1 width="800px" class="sort-table"> <thead> <tr> <th>Date</th> <th>Usage</th> <th>Cost</th> <th>Remain</th> </tr> </thead> <tbody> <tr> <td>2008-3-25</td> <td>book place @dhgu</td> <td>-40</td> <td>-40</td> </tr> <tr> <td>2008-4-1</td> <td>book place @dhgu</td> <td>-40</td> <td>-80</td> </tr> </tbody> </table>
Tablesorter im Text aufrufen auf der im zweiten Schritt angegebenen CSS-Klasse für sortierte Tabellen () Funktion:
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".sort-table").tablesorter();
});
</script>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie das JQuery-Plug-In Tablesorter Beispiele für die Verwendung von HTML-Tabellen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
