ホームページ > 記事 > ウェブフロントエンド > jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明 使用例
jqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明 使用例
- 伊谢尔伦オリジナル
- 2017-07-22 09:56:502588ブラウズ
tablesort は、非常に便利な jQuery テーブル ソート プラグインです。 複数のデータ型の並べ替えをサポートし、テーブルの内容のデータ型を自動的に識別するため、非常に使いやすくなっています。
jQuery tablesort を使用して HTML テーブル メソッドを実装します:
1. jQuery および tablesort スクリプトをダウンロードし、HTML でスクリプト ファイルを参照します:
<script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script>
2. 並べ替える必要がある HTML テーブルをフォーマットします。 :
a. 並べ替える必要があるテーブルの CCS クラスを指定します: class="sort-table"
b. thead タグと tbody タグを使用してテーブル ヘッダーとテーブル本体をマークします
c. 、 th タグを使用してテーブルヘッダーを定義する必要があります
フォーマットされた HTML テーブルは次のようになります:
<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. jQuery コードを追加して HTML テーブルの並べ替えを有効にします:
本体内で tablesorter() 関数を呼び出します。 2番目のステップで指定したソートされたテーブルCSSクラスで:
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".sort-table").tablesorter();
});
</script> 上記の3つのステップを通じて、jQuery tablesortはHTMLテーブルをソートできます。
以上がjqueryプラグインtablesorterによるhtmlテーブルの実装方法の詳細説明 使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。