• ベストアンサー

表をソートできるようにしたい

シンプルなテーブルで、書籍のリスト表を公開していますが、これを、ボタンか何かをクリックすると題名順、作家順などで、行を並べ替えたものを表示するしたいのです(エクセルみたいに)。aspなどのプログラミングを使わないと無理ですか?(プログラミングは全然知りません。フリーで公開されているcgiを設置するくらいならできますが) 今のところは並べ替えたhtmlファイルを用意しておいてSSIで呼び出すという方法を考えているのですが、なにか他に良い方法がありましたらご教授ください。

  • rasse
  • お礼率64% (18/28)
  • HTML
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • xruz
  • ベストアンサー率50% (72/143)
回答No.3

こんにちは、xruzです。JavaScript(フレーム対応)で作ってみました。 Ie5.5、NN4.75で動作確認してます。 [ファイル名:sortbook0.html] <Html> <Head> <Title>SortBook</Title> </Head> <Frameset Rows="50,*"> <Frame Src="sortbook1.html" name="head" Scrolling="no"> <Frame Src="sortbookx.html" name="book"> </Frameset> </Html> [ファイル名:sortbook1.html] <Html> <Head> <Title>sortobj</Title> </Head> <Script Language="JavaScript"> <!-- var bookData=new Array( "Name00000000000000000000000000000000000000000000000","Auth5","1987",1000, "Name00100000000000000000000000000000000000000000000","Auth5","1987",1000, "Name00200000000000000000000000000000000000000000000","Auth4","2001",500, "Name00300000000000000000000000000000000000000000000","Auth3","1868",10000, "Name00400000000000000000000000000000000000000000000","Auth2","1872",5000, "Name00500000000000000000000000000000000000000000000","Auth1","1906",2000, "Name00600000000000000000000000000000000000000000000","Auth5","1987",1000, "Name00700000000000000000000000000000000000000000000","Auth4","2001",500, "Name00800000000000000000000000000000000000000000000","Auth3","1868",10000, "Name00900000000000000000000000000000000000000000000","Auth2","1872",5000, "Name01000000000000000000000000000000000000000000000","Auth1","1906",2000, "Name01100000000000000000000000000000000000000000000","Auth5","1987",1000, "Name01200000000000000000000000000000000000000000000","Auth2","1872",5000 ); var rCnt=13; // 総件数 var cCnt=4; // 項目数 // var books=new Array(rCnt); var swk=new Array(rCnt); function docWrite() { var wk=""; for(var i=0;i<books.length;i++) { wk=wk+"<tr>"; for(var j=0;j<cCnt;j++) wk=wk+"<td>"+books[swk[i][1]][j]+"</td>"; wk=wk+"</tr>"; } parent.book.document.write(wk); } function runSort() { for(var i=0;i<rCnt;i++) { for(var j=1;j<rCnt;j++) { if(swk[j-1][0]>swk[j][0]) { var wks=new Array(swk[j-1][0],swk[j-1][1]); swk[j-1]=swk[j]; swk[j]=wks; } } } parent.book.location.href=parent.book.location.href; } function setSortKey(col) { for(var i=0;i<rCnt;i++) { var sw=new Array(books[i][col],i) swk[i]=sw; } runSort(); } function startScript() { for(var i=0;i<rCnt;i++) { var be=new Array(cCnt-1); for(var k=0;k<cCnt;k++) be[k]=bookData[cCnt*i+k]; books[i]=be; } setSortKey(0); } //--> </Script> <Body onLoad="startScript();"> <Form Method="post" Name="frm"> <Input Type="button" Name="sort0" Value="書名でSort" onClick="setSortKey(0);"> <Input Type="button" Name="sort1" Value="著者でSort" onClick="setSortKey(1);"> <Input Type="button" Name="sort2" Value="刊行年でSort" onClick="setSortKey(2);"> <Input Type="button" Name="sort3" Value="価格でSort" onClick="setSortKey(3);"> </Form> </Body> </Html> [ファイル名:sortbookx.html] <Html> <Head> </Head> <Body> <table border='1'> <Script Language="JavaScript"> <!-- parent.head.docWrite(); //--> </Script> </table> </Body> </Html> Sortロジックは単純比較です。データが多い場合はクイックソートロジックを組み込んでください。でもあまり多いと文字列領域の制限値(?)を越えて表示できないかも。

rasse
質問者

お礼

ひゃあああ。こんなにご丁寧に、本当にありがとうございます。 こんな、フレームまで使った立派なものを...あとは中身を上手に入れ替えるだけですね。ひたすら感謝、感謝です。

その他の回答 (2)

回答No.2

ブラウザがIEだけに限られてしまいますが、データバインディングという機能があります。 HTML内にCSVファイルを読みこみ、これを操作できる技術です。

参考URL:
http://www.interq.or.jp/guitar/kozo/dh/dhsamk075.html
rasse
質問者

お礼

これはすごい!こんな技術があるのですね。早速テストしてみたところすぐできました。あとは本の題名が漢字だとうまく並ばなかったりする部分を工夫して、もっと試してみたいと思います。ありがとうございました。

  • zealzany
  • ベストアンサー率35% (19/53)
回答No.1

1.データ量はどれくらいでしょうか? 2.プログラムなしであればエクセルファイルをサーバー上に置くことも可能です。(ブラウザ側の設定によってはダウンロードしてしまいますが。) 3.少ない量であればJabaスクリプトでも上記の処理も可能です。 4.CGIではsort命令を使えば可能です。 5.自分のパソコンでエクセルにて蔵書リストを作成し、並べ替えが違う複数のhtmlを作成し、リンクで切り替えることも可能です。

rasse
質問者

お礼

お礼が遅くなり申し訳ありません。 色々なやり方があるのですね。勉強のためにも全部ためしてみてみようと思っています。ありがとうございました。

関連するQ&A

  • メールを送信するとサイトに反映されるcgi

    メールを送るだけで自分のサイトに内容が更新される、日記・掲示板のようなCGIスクリプトを探しています。 要は、携帯メールで自分サイトの日記を更新したいと考えています。上記の方法、または、他に良い方法があれば(携帯サイトを立ち上げ、掲示板をつくり、内容をSSIで取り込めば・・・と、浅はかに考えたりしていますが)教えてください。 ちなみに、CGI設置の知識はありますが、プログラミングは出来ません。

    • ベストアンサー
    • CGI
  • CGIとPHPの違いってなんですか?

    プログラミング初心者です。初歩的な質問で申し訳ありません。初心者向けの書籍等で調べてみると掲示板の作成やカウンター設置等CGIでできることはPHPでもできてPHPでできることはCGIでも同じことができるようなイメージなのですが、逆にそれぞれがそれぞれのプログラムじゃないとできない、ということや特徴的な使用方法等わかりやすく教えていただけたら助かります。よろしくお願いします。

    • ベストアンサー
    • CGI
  • DB内データのソート

     SQLServer2000を使って1週間の初心者です。  現在、ExcelからDBに対して数万件単位でデータをインポートしています。(DTSインポートウィザード使用)  インポート後、Enterpriseマネージャにてデータを見ると、ExcelとDBとの行の位置が異なっています。  (例)2万件を2回インポートした場合   ID_000001 ・ ・   ID_020000   ID_020059 ・ ・   ID_040000 ※ID_020001~ID_020058は、ID_020000以前のレコードの間に存在したりします。  一意である「ID_??????」行でSQL文ソート(ORDER BY)して見た目をExcelと同様の行順にしても、EnterPriseManagerでテーブルを閉じ、再度テーブルを開いたら以前のデータのままです。  ソート状態を上書き保存するようなことはできないでしょうか?  また、Excelと同じ行順でインポートする方法はないでしょうか?

  • フレームページでSSIを使ってアクセス解析

    フレーム内ページ(main.shtml)にSSIを使ってリンク元を取得したいのですが、どなたか良い方法はないでしょうか。フレームページはindex.htmlです。 SSIでなければ"parent.document.referrer"を使ってCGIで取得するのは設置したことはありますが、SSIだとリンク元が親フレーム情報しか得られません。なんとかSSIでやりたいのですが…。リンク元以外の取得はできますがリンク元が取れません。SSIの現在の記述は下の通りです。 <!--#exec cgi="./acc.cgi"--> どうぞ、暑いのにすいません、教えてください。

    • 締切済み
    • CGI
  • ホームページの作成について

    上場会社のホームページを外部に委託して制作を考えております。 その中でCGIやSSIを使用して入力フォームの作成を考えておりますが、セキュリティーの関係で悩んでおります。 現在、入力フォームはありませんが、自社サーバーで公開しております。CGIやSSIを使用して入力フォームを作成した場合のサーバーは、ホスティングサーバーなどを利用して分けた方がよろしいのでしょうか? 方法は、次のとおり考えております。 1.すべて自社サーバーで公開する。 2.CGIやSSIを使用したページのみをホスティングサーバーで公開する。 3.すべてホスティングサーバーで公開する。 一般的には、どのような形をとっているものなのでしょうか? お教え願います!

    • ベストアンサー
    • CGI
  • IIS7のSSIの許可をする方法について

     Windows IIS7でPHPやCGIができる用に設定しましたが、アクセスカウンタ設置したいのですが、SSIを許可する方法がわかりません。  よろしくお願いいたします。

  • 何で作れば・・・

    趣味でとあるサイトを公開しているのですが、今までリストを普通にテーブルで作っていました。 しかし最近量が増えて見にくくなっているため、作り替えようと思っています。 そこで思ったのが、閲覧者が必要な項目だけ表示できないか、ということです(単純に説明すると、エクセルのフィルタみたいな昨日が欲しい) 細かく種別に分けてhtmlで作ればいいのですが、やはり管理も大変ですし、一覧表示もしたいので、何かいい方法はないかなぁ、と思っています。 一応cgiの設置とJavaScriptを組み込むくらいは出来ますが、他は見事な素人です。勉強する気はあるので、これを使えば出来るよ、という方法があれば教えてください。 (ところでこれはカテゴリー違い・・・?)

    • ベストアンサー
    • HTML
  • 多段ソート

    C言語というよりはアルゴリズムの話です。 [名前], [生年月日] の2つのカラムで表される固定長の行データが羅列されたファイルがあります。 また、各カラムを比較して行をソートした場合にどの行が何番目にくるかといったインデックス情報を木構造で保持したファイルがあります。 (このファイルは行データの追加・削除時に更新される) これらのファイルを利用して、生年月日でソートし、かつ日時が同じ場合は名前順にソートした場合の上から10個分だけのデータを取り出したいのですが、効率のよい方法は無いでしょうか? 全データを読み込んでから、バブルソート等の順序を崩さないソートを多重にかけることはなるべく避けたいのです。 そのためにソート済みのインデックス的な役割を持つファイルを用意しているのですが、多段ソート時にどう応用すればよいのかわからなくなってしまいました。 例 日時、名前の順にソートされた上4つ分のデータが欲しい。 【一覧】 [1行目] 10/20, Aさん [2行目] 11/30, Fさん [3行目] 9/10, Cさん [4行目] 11/30, Bさん [5行目] 12/10, Dさん 【生年月日でソートされた インデックス】 9/10, 3行目 10/20, 1行目 11/30, 2行目 11/30, 4行目 12/10, 5行目 【名前でソートされた インデックス】 Aさん, 1行目 Bさん, 4行目 Cさん, 3行目 Dさん, 5行目 Fさん, 2行目 得たい結果 [3行目] 9/10, Cさん [1行目] 10/20, Aさん [4行目] 11/30, Bさん [2行目] 11/30, Fさん

  • 更新が簡単にできるテーブルデザイン

    更新が簡単にできる、テーブルデザインを教えてください。 http://mixes.aki.gs/ 現在はJavascriptのアコーディオン(2行)を使っているのですが、タグがゴチャゴチャして更新の際にどこを更新すれば良いか分かりづらいので、テーブル(1行)を使った形に書き換えたいと思います。 動的なテーブル書き換え (XML) http://allabout.co.jp/internet/javascript/closeup/CU20051030A/index.htm のように別途作ったリストから表を自動生成できるものなどを探しているのですが、このような手軽に実装できそうな方法がありましたら教えてください。 出力されるタグはCSSでもTableでも構いません。サーバーにはCGI/PHPが設置でき、Javascriptなども使用できます。追加/編集が簡単で比較的情報が見やすいものを希望します。

    • ベストアンサー
    • HTML
  • HTMLのテーブル行の高さを動的に変更する方法

    ASPを使用してDBにアクセスし、取得したデータに合わせてテーブルでリストを作成する勉強をしています。 表示するデータの中に、文章をセル内に2行又は3行で表示しなければならないものがあります。 行の高さを2行の時と3行の時で動的に変更する方法はありませんでしょうか? 宜しくお願い致します。