AIと戦って、あなたの人生のリスク診断 >>

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

このQ&Aに関連する最新のQ&A

A 回答 (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ロジックは単純比較です。データが多い場合はクイックソートロジックを組み込んでください。でもあまり多いと文字列領域の制限値(?)を越えて表示できないかも。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/10/15 16:58

ブラウザがIEだけに限られてしまいますが、データバインディングという機能があります。


HTML内にCSVファイルを読みこみ、これを操作できる技術です。

参考URL:http://www.interq.or.jp/guitar/kozo/dh/dhsamk075 …
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/10/15 16:46

1.データ量はどれくらいでしょうか?


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

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

お礼日時:2001/10/15 16:44

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLでテーブルの並び替え

HTMLでテーブルの並び替えで質問です。
以下テーブルの1行目各項目名をクリックすると対象列の昇順、さらにクリックで降順、再度クリックで昇順が行いたいと思っております。

<form name="nForm">
<table>
<thead>
<tr><th>項目A</th><th>項目B</th><th>項目C</th></tr>
</thead>
<tbody>
<tr><td>20</td><td>い</td><td><input type="text" id="TX[0]" name="TX[0]" value="20"></td></tr>
<tr><td>30</td><td>あ</td><td><input type="text" id="TX[1]" name="TX[1]" value="50"></td></tr>
<tr><td>10</td><td>お</td><td><input type="text" id="TX[2]" name="TX[2]" value="30"></td></tr>
<tr><td>55</td><td>え</td><td><input type="text" id="TX[3]" name="TX[3]" value="10"></td></tr>
<tr><td>90</td><td>う</td><td><input type="text" id="TX[4]" name="TX[4]" value="15"></td></tr>
</tbody>
</table>
</form>

いくつかの方法を試してみたのですが思った結果が出ない為お知恵をお借りできないでしょうか?
http://jsajax.com/Articles/jQueryTableSorter/1120
の方法は試行してみましたがテキストフィールドの並び替えがnameの値で並び替えが掛ります。
value(変動値)での並び替えを行うことが必要です。

HTMLでテーブルの並び替えで質問です。
以下テーブルの1行目各項目名をクリックすると対象列の昇順、さらにクリックで降順、再度クリックで昇順が行いたいと思っております。

<form name="nForm">
<table>
<thead>
<tr><th>項目A</th><th>項目B</th><th>項目C</th></tr>
</thead>
<tbody>
<tr><td>20</td><td>い</td><td><input type="text" id="TX[0]" name="TX[0]" value="20"></td></tr>
<tr><td>30</td><td>あ</td><td><input type="text" id="TX[1]" name="TX[1]" value="50"></td></tr>
<tr><td>10</td...続きを読む

Aベストアンサー

ご提示のサイトで使用しているものの配布元はここ(↓)だと思いますが、マルチキーでのソートもできるみたいでなかなかよくできている感じですね。
 http://tablesorter.com/docs/index.html

その機能を利用した方が簡単だと思いますので、それを使えるように考え方を変えるのではいけませんか?
(さすがに、inputタグの中まで参照してくれるようなライブラリは探したところで無いと思いますので)


<考え方1>
ご提示のテーブルに非表示の列などを追加しておいて、入力値はそのままその列のセルの値として反映させる。
inputの列をキーにソートする場合は、キーをこの非表示の列に置き換えてソートさせる。

<考え方2>
考え方1と似ていますが、テーブルの表示は全てテキストにしておいて、ユーザ入力をしたい列ではセルをクリックしたらinput要素を生成して入力を受付けるというUIに変更する。(入力終了時に、入力値をセルの値としてinput要素は削除する)
こちらの方法だと、キーの置き換えなどもしなくて済むので、tablesorterとのやり取りなどはほとんど考えなくても済みそうですね。

<考え方3>
formの送信を行なっているのかいないのか不明ですが、考え方2だと送信してもinput要素がないので送信されなくなってしまいます。
それなので、考え方1の表示/非表示を逆転しておいて、入力のUIには考え方2を用いるという方法。(input要素が非表示)
多分、HTMLソースの出力もphpなどから行なっているのではないかと推測しますが、この方法なら出力時に『inputタグを出力したらそのセルは非表示にしておいて、(例えば)次の列にセルを追加して、同じ値をそのまま表示』にする程度の変更でよさそう。


サーバー側の処理などHTML以外の仕組みがどのようになっているかによって手間が変わってくると思いますが、全体像がよくわかりませんので、実際にどのような方法が一番良いのかは適宜ご判断ください。

ご参考になれば…

ご提示のサイトで使用しているものの配布元はここ(↓)だと思いますが、マルチキーでのソートもできるみたいでなかなかよくできている感じですね。
 http://tablesorter.com/docs/index.html

その機能を利用した方が簡単だと思いますので、それを使えるように考え方を変えるのではいけませんか?
(さすがに、inputタグの中まで参照してくれるようなライブラリは探したところで無いと思いますので)


<考え方1>
ご提示のテーブルに非表示の列などを追加しておいて、入力値はそのままその列のセルの値として...続きを読む


人気Q&Aランキング