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


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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/10/22 14:46:44
  • 終了:2006/10/22 22:14:07

ベストアンサー

id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912006/10/22 22:03:01

ポイント28pt

とりあえず、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 でまったく出来ないわけではありません。

id:Yoshio1

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

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

大変参考になりました。

2006/10/22 22:12:48

その他の回答(2件)

id:Mook No.2

Mook回答回数1312ベストアンサー獲得回数3912006/10/22 14:58:09

ポイント26pt

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


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

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


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


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

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

id:Yoshio1

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

ID:Mookさん

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

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

2006/10/22 16:41:00
id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912006/10/22 22:03:01ここでベストアンサー

ポイント28pt

とりあえず、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 でまったく出来ないわけではありません。

id:Yoshio1

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

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

大変参考になりました。

2006/10/22 22:12:48
  • id:Mook
    Web の環境に関して質問ですが、PHP等の使用は可能ですか?
    また JavaScript では不十分ですか?

    JavAScript を使用したソートの例は、zifree さんが示されていますが、それでは不十分でしょうか。

    そうであるなら、その点を補足いただいたほうが回答しやすいように思います。
  • id:Yoshio1
    PHP等の使用については確認がいりそうですね。JavaScriptだと表の並べ替えができますが、エクセルのように必要情報のみの表示にはならないようですね。

    そうなるとPHPをつかった構築になりそうです。ところがPHPやPerlでなにができるのかはよくわからないので、勉強してみたいと思います。

  • id:Mook
    回答した例では選択ではなく、文字を入力するようにしましたが、選択リストを使用すれば、選択できるようになります。

    やり方はいろいろありますが、どれか一つ覚えると、ホームページ作りも楽しくなるかと思います。

    また、回答でも書きましたが、JavaScript で表のサイズを変えることが出来ないわけではありません。
    それぞれでやり方が異なるということです。
  • id:Mook
    後から見直すと、恥ずかしいコードですが、参考になれば幸いです。

    反省点
    (1) </table> が抜けてる(一応は動きますが)
    (2)$list = split("/", $tableList[$i]);
    は次に続くif 文の後に書くべきだった。

    その他
    (1) Perl も PHP も考え方は一緒です。
     渡された条件(今回はGET)により、HTMLの生成を動的に行っています。
    (2)今回の例のキーワード
    ereg・・・keyword で指定された文字を含んでいるかの判定
      ここで文字を含まなければ、行の表示をスキップしています。
    (3)コードの注意点
    &amp;&amp; は実際のコードとしては && です。
    (4)がんばってください(^_^)/
  • id:zifree
    > エクセルのように必要情報のみの表示にはならないようですね。

    JavaScriptでオートフィルタのようなことも一応、できるようです。
    ちょっと複雑ですが
    http://neko.dosanko.ch/contents/script/auto-filter
  • id:Yoshio1
    基本的な質問ですが、おしえてください。
    JavaScriptで設定する場合には、Server側になにかしらの設定が必要になりますか?PHPの場合だと、サーバー側に設定が必要だということを先日理解しました(^_^;)。
  • id:Mook
    JavaScript はサーバ側の設定は必要ありません。
    その代わり、IE や FireFox 等ブラウザによって挙動が変わる可能性があります。

    PerlなどのCGIやPHPはサーバ側で使用できるかどうかを確認する必要があります。

    お使いのWEB サーバですでに PHP や CGI が利用可能な環境であれば、通常通りコードをアップするだけですが、そうでなければ JavaScript 等が選択肢となるかもしれません。

    ご自身で管理しているWEBサーバであれば、PHP の機能を追加するのはそれほど難しくないと思います。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません