そうですね、早速、並び替えられる様にしましょうか。
ご自分で Javascript を書くのが本来でしょうが、Internet 上に公開されているものがあります。
今回は、それを流用させて戴きましょうか。
表はデータ件数が増えて来ると必要なものを見付け難くなりますね。
入力した順番で表示される表を、項目欄でソートすれば、見落としも少なくなり、発見までの時間も短縮できます。
手順は次の通りです。
- Internet 上のサイトから、表をソート可能にするファイルをダウンロード
- 圧縮ファイルなので展開 の上、必要ファイルを HTML のファイルと同じフォルダにコピー
- HTML ファイルに、ソートに必要な記述を追加
順に解説します。
1. Internet 上のサイトから、表をソート可能にするファイルをダウンロード
実に様々な Script （機能拡張パーツ） が紹介されています。 以下は、その一例です。
次のページにアクセスして、中ほどの ダウンロード リンクから入手します。
HTMLテーブルソートJavaScriptライブラリ とりさんのソフト屋さん by とりさん さま
2. 圧縮ファイルなので展開 の上、必要ファイルを HTML のファイルと同じフォルダにコピー
ZIP ファイルを展開します。
sorter フォルダの中の sorter-0.2.2.js というファイルが お目当て のファイルです。
このファイルを 今回作成している HTML のファイルと 同じフォルダに コピーします。
この時に、ファイル名を sorter.js に変更します。
3. HTML ファイルに、ソートに必要な記述を追加
最後に、今回作成している HTML ファイル ( MyLinkList.html ) に、必要事項を 2 箇所に加筆して行きます。
<!--sorter js Load --> と <!--Table Control--> と から始まる 箇所 です。
前回をご存知の方は、以下を参考に、手直しをして下さい。
<!DOCTYPE html>
<html lang="jp" xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta charset="utf-8" />
<title>MyLinkList Local</title>
<!--sorter js Load -->
<script type="text/javascript" src="sorter.js" charset="utf-8"></script>
<body>
My Link List<br />
<br />
<table class="table-z900" id="sample" >
<thead>
<th width= "60">分類</th>
<th width="120">区分</th>
<th width="220">内容</th>
<th width="150">LINK</th>
<th width="250">Memo</th>
</thead>
<tbody>
<tr>
<td>検索</td>
<td>検索 Google</td>
<td>Google ホーム</td>
<td><a href="http://www.google.co.jp/">Google Home</a></td>
<td></td>
</tr>
<tr>
<td>気象</td>
<td>気象 台風</td>
<td>台風情報</td>
<td><a href="http://www.jma.go.jp/jp/typh/">台風情報 気象庁</a></td>
<td>台風中心クリックで詳細</td>
</tr>
<!--*** 注: 説明の為、データ部分を一部省略しています。実際の変更は不要です。 ***-->
</tbody>
</table>
<!--Table Control-->
<script type="text/javascript">
var sample=new table.sorter("sample");
sample.init();
</script>
<style>
.table-z900 {
border-collapse: collapse; /* 枠線 collapse:1本 separate:2本分離 */
}
.table-z900 th {
border: solid 1px #c1c1c1; /* 線種 solid：実線 dashed：破線 ... 線幅 線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字 px：ピクセル */
}
.table-z900 td {
border: solid 1px #cccccc; /* 線種 solid：実線 dashed：破線 ... 線幅 線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字 px：ピクセル */
}
</style>
</body>
</html>
緑色の部分 <!-- --> は、コメントを表します。 実行には影響しません。 省略可能です。
尚、上の例では、説明用に、データの一部を省きました。
赤い部分が、付け加えた部分です。
オレンジの部分は、今回の関連部分ですが、前回、既に、入っていました。
これを上書き保存して、実行すると、表が項目の内容に応じてソート可能になります。
但し、利用するブラウザの設定に因っては、最初に 実行制限を許可する為のポップアップが表示されます。
これは、ブラウザによるセキュリティ保護の為の措置です。
許可すると、表の該当項目欄（見出し）のクリックで ソートが出来る様になります。
許可しないと、以前（前回）の表と同じで、操作を受け付けません。
注： リンクの文字色が違うのは、利用の有無によるものです。
取り敢えず、これで、少しは、使えるものになったでしょうか？
実際には、データをドンドン蓄積して使って下さい。
項目毎にソートが可能ですので、項目の組み方やデータの内容を ご自分で使い易い様に 変更されると良いでしょう。
0 件のコメント:
コメントを投稿