tableをソート（並び替え）する[TableKit]
[TableKit]とは
[TableKit] はHTMLテーブルの拡張機能で、列のソート、サイズ変更とセルの編集ができます。ダウンロードと準備
Downloadからダウンロードして[¥tablekit-demo¥js]の中の[fabtabulous.js]と[tablekit.js]を（外部JavaScriptファイルが増えてきたので、解かりやすくするために）[¥js¥tablekit1.2.2]の中に置く。[prototype.js] もダウンロードして同じフォルダに置く。
htmlで[tablekit1.2.2]の中の3つの外部JSファイルを読み込ませる。
<script type="text/javascript" src="./js/tablekit1.2.2/prototype.js"></script>
<script type="text/javascript" src="./js/tablekit1.2.2/fabtabulous.js"></script>
<script type="text/javascript" src="./js/tablekit1.2.2/tablekit.js"></script>ソートしたいテーブルに
class="sortable"デザインは[tablekit.css]を新規作成し、必要なものを抜粋して記述する。
/* CSS Document */
td, th {
padding: 5px;
}
th {
background-color: #eef3f9;
background: url(../img/updown.gif) no-repeat;
}
tr.rowodd {
background-color: #fff;
}
tr.roweven {
background-color: #f5f5f5;
}
.sortcol {
cursor: pointer;
padding-right: 20px;
background-repeat: no-repeat;
background-position: right center;
}
.sortasc {
background-image: url(../img/up.gif);
}
.sortdesc {
background-image: url(../img/down.gif);
}
.nosort {
cursor: default;
}
.name{
width:100px;
}
.detail{
max-width:430px;
min-width:200px;
}
.category{
width: 90px;
font-size:70%;
}
.frequency{
width: 50px;
text-align: right;
}
.favorites{
width:70px;
}htmlで（cssフォルダの中の）[tablekit.css]を読み込ませる。
<link rel="StyleSheet" href="css/tablekit.css" type="text/css">tableソート（並び替え）サンプル
| 名称 | 詳細 | カテゴリー | 使用頻度 | お気に入り度 |
|---|---|---|---|---|
| 1 | お | J | 30 | ☆☆☆ |
| 2 | え | F | 50 | ☆ |
| 3 | う | K | 70 | ☆☆☆☆☆ |
| 4 | い | S | 10 | ☆☆ |
| 5 | あ | L | 90 | ☆☆☆☆ |
参考資料：検索「テーブルの列をソートできるように」
