- ベストアンサー
表をソートできるようにしたい
シンプルなテーブルで、書籍のリスト表を公開していますが、これを、ボタンか何かをクリックすると題名順、作家順などで、行を並べ替えたものを表示するしたいのです（エクセルみたいに）。aspなどのプログラミングを使わないと無理ですか？（プログラミングは全然知りません。フリーで公開されているcgiを設置するくらいならできますが） 今のところは並べ替えたhtmlファイルを用意しておいてSSIで呼び出すという方法を考えているのですが、なにか他に良い方法がありましたらご教授ください。
- みんなの回答 （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ロジックは単純比較です。データが多い場合はクイックソートロジックを組み込んでください。でもあまり多いと文字列領域の制限値(?)を越えて表示できないかも。
その他の回答 (2)
- mangetsu_k
- ベストアンサー率40% (33/81)
ブラウザがＩＥだけに限られてしまいますが、データバインディングという機能があります。 ＨＴＭＬ内にＣＳＶファイルを読みこみ、これを操作できる技術です。
お礼
これはすごい！こんな技術があるのですね。早速テストしてみたところすぐできました。あとは本の題名が漢字だとうまく並ばなかったりする部分を工夫して、もっと試してみたいと思います。ありがとうございました。
- zealzany
- ベストアンサー率35% (19/53)
１．データ量はどれくらいでしょうか？ ２．プログラムなしであればエクセルファイルをサーバー上に置くことも可能です。（ブラウザ側の設定によってはダウンロードしてしまいますが。） ３．少ない量であればＪａｂａスクリプトでも上記の処理も可能です。 ４．ＣＧＩではｓｏｒｔ命令を使えば可能です。 ５．自分のパソコンでエクセルにて蔵書リストを作成し、並べ替えが違う複数のｈｔｍｌを作成し、リンクで切り替えることも可能です。
お礼
お礼が遅くなり申し訳ありません。 色々なやり方があるのですね。勉強のためにも全部ためしてみてみようと思っています。ありがとうございました。
お礼
ひゃあああ。こんなにご丁寧に、本当にありがとうございます。 こんな、フレームまで使った立派なものを...あとは中身を上手に入れ替えるだけですね。ひたすら感謝、感謝です。