Heim > Artikel > Web-Frontend > Detaillierte Erläuterung, wie das JQuery-Plug-In Tablesorter Beispiele für die Verwendung von HTML-Tabellen implementiert

Detaillierte Erläuterung, wie das JQuery-Plug-In Tablesorter Beispiele für die Verwendung von HTML-Tabellen implementiert

伊谢尔伦Original: 2017-07-22 09:56:502588Durchsuche

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>

3. Fügen Sie jQuery-Code hinzu, um die HTML-Tabellensortierung zu aktivieren:

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>

Durch die oben genannten 3 Schritte kann jQuery Tablesort HTML-Tabellen sortieren.

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Implementierung kreisförmiger Zeichenmuster auf der Leinwand durch JavaScript und HTML5Nächster Artikel：Einführung in die Implementierung kreisförmiger Zeichenmuster auf der Leinwand durch JavaScript und HTML5

In Verbindung stehende Artikel

Mehr sehen