jquery.tablesorter:テーブルタグをソート可能にするJs
- 2019.05.11
- JavaScript jQuery
- jquery.tablesorter, sort, table, ソート

テーブルの見出し(thタグ)をクリックすると、その要素(tdタグ)が降順・昇順でソートされます。
1.CSSの記述例
以下は任意です。
<style type="text/css"> <!-- body { margin: 0px; font-size:14px; } h1{ font-size:16px; font-weight:normal; line-height:1.4em; text-align:center; padding:15px 0 10px 0; } #idWrap{ width:700px; margin:0 auto; } table{ border:solid 1px #333333; } th{ background-color:#333333; color:#FFFFFF; border-bottom:solid 1px #333333; cursor:pointer; } th:hover{ background-color:#FFFFFF; color:#333333; border-bottom:solid 1px #333333; } th, td{ padding:10px; font-weight:normal; } --> </style>
2.JavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="jquery.tablesorter.js"></script> <script type="text/javascript"> $(function(){ $('#myTable').tablesorter(); }); </script>
3.HTMLの記述例
<table id="myTable" cellpadding="0" cellspacing="0"> <thead> <tr> <th>No</th> <th>Category</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>css</td> <td><a href="https://dad-union.com/category/css" target="_blank">https://dad-union.com/category/css</a></td> </tr> <tr> <td>2</td> <td>JavaScript</td> <td><a href="https://dad-union.com/category/javascript" target="_blank">https://dad-union.com/category/javascript</a></td> </tr> <tr> <td>3</td> <td>jQuery</td> <td><a href="https://dad-union.com/category/jquery" target="_blank">https://dad-union.com/category/jquery</a></td> </tr> <tr> <td>4</td> <td>PHP</td> <td><a href="https://dad-union.com/category/php" target="_blank">https://dad-union.com/category/php</a></td> </tr> </tbody> </table>
対応ブラウザはIE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+の様です。Chromeでも大丈夫そうです。
-
前の記事
snowfall.jquery:紙吹雪を表示するJs 2019.05.10
-
次の記事
jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法 2019.05.12