人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLテーブル上に表示したコンテンツをソート・並べ方できるように作りこむことはできるのでしょうか?エクセルでいうと、フィルターのような使い勝手をイメージしています。そのため、ソートをするキーは、ユーザによって選択できるようにしたいのですが、作り方がよくわからずにいます。

初心者なのでわかりやすく手順を説明しているサイトの紹介もお願いします。

●質問者: Yoshio1
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML イメージ エクセル コンテンツ サイト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● zifree
●26ポイント

IE6、firefox1.5.0.7で確認

http://www.phoenix-c.or.jp/~s-moon/sub411.htm

http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-notes/sort_rows.ht...

IE6では動きますが、firefoxでは動かないようです

http://www.xillion.net/cgi-bin/mt/archives/000262.html


2 ● Mook
●26ポイント

静的な HTML ファイルでは、内容を変更することは出来ません。


JavaScript を使用するか、PHP やJSP などの動的なページ表示が出来る仕組みを利用する方法が必要です。

(あるいは Perl 等をつかったCGIでも可)


データベース等を使用するのでなければ、JavaScriptが簡単だと思いますが、項目数を変えたいのであれば、DOM を制御する必要があるので、すこし周辺を勉強する必要があります。


直接的な回答でなくて申し訳ありませんが、対象となるページ等を提示された方が、具体的なアドバイスもあるかと思います。

個人的には PHP あたりが使えれば、スクリプトを書くのが簡単な気がしますが・・・。

◎質問者からの返答

回答ありがとうございます。

ID:Mookさん

以下のようなイメージのテーブルですが、通常は、すべてが表示されています。しかしユーザによっては、りんごだけがみたいので、りんごのみをフィルターして表示したいというイメージです。

http://d.hatena.ne.jp/Yoshio1/20061022


3 ● Mook
●28ポイント ベストアンサー

とりあえず、PHP でのコード例です。

<html>
<head>
<style type=text/css>
td { background-color:White; width="100";}
</style>

<?php
 $tableList = array( '名前/色/個数',
 'りんご/赤/1',
 'みかん/だいだい/2',
 'りんご/赤/1',
 'なし/白/4',
 'レモン/黄/1',
 'りんご/赤/2',
 'なし/白/4',
 'りんご/赤/5',
 'りんご/赤/5',
 'みかん/だいだい/2',
 'みかん/だいだい/1',
 'なし/白/1',
 'なし/白/3',
 'なし/白/4',
 'なし/白/1',
 'レモン/黄/4' );
 if ( isset( $_GET['keyword'] ) ) {
 $filterWord = $_GET['keyword'];
 } else {
 $filterWord = "";
 }
?>
</head>
<body bgcolor="#C0FFC0">
<form name="myForm">
<div>フィルタ
<input name="keyword" type="text" value=<?php print "\"".$filterWord."\"";?>>
<input type="submit" value="実行"></div>
<table border=1>
<?php
// データの表示
 for( $i=0 ; $i<sizeof($tableList) ; $i++ ) {
 $list = split("/", $tableList[$i]);
 if ( strlen( $filterWord ) > 0 ) {
 if ( !ereg( $filterWord, $tableList[$i] ) &amp;&amp; ( $i > 0 ) ){
 continue;
 }
 }
 print " <tr>\n";
 print " <td>$list[0]</td>\n";
 print " <td>$list[1]</td>\n";
 print " <td>$list[2]</td>\n";
 print " </tr>\n";
 }
?>
</form>
</body>
</html>

実行した結果はこんな感じです。

f:id:Mook:20061022215443j:image


「りんご」でフィルタをかけると

f:id:Mook:20061022215442j:image

こんな感じです。


ただ誤解の内容にいえば、JavaScript でまったく出来ないわけではありません。

◎質問者からの返答

ありがとうございます。やりたいことを目の前で表現していただいたので、PHPの構築を目指してみたいと思います。

とはいえ、PealとPHPってなにが違うの?という感じのレベルですので、少しずつ学習しながらになりそうです。

大変参考になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ