OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • 暇なときにでも
  • 質問No.145904
  • 閲覧数215
  • ありがとう数4
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 64% (18/28)

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

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

  • 回答No.3
レベル10

ベストアンサー率 50% (72/143)

こんにちは、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

お礼率 64% (18/28)

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

その他の回答 (全2件)

  • 回答No.1
レベル8

ベストアンサー率 35% (19/53)

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

お礼率 64% (18/28)

お礼が遅くなり申し訳ありません。
色々なやり方があるのですね。勉強のためにも全部ためしてみてみようと思っています。ありがとうございました。
投稿日時 - 2001-10-15 16:44:54


  • 回答No.2
レベル9

ベストアンサー率 40% (33/81)

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

お礼率 64% (18/28)

これはすごい!こんな技術があるのですね。早速テストしてみたところすぐできました。あとは本の題名が漢字だとうまく並ばなかったりする部分を工夫して、もっと試してみたいと思います。ありがとうございました。
投稿日時 - 2001-10-15 16:46:23
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ