出産前後の痔にはご注意!

JavaScriptかなり初心者です。
急に必要となり、本やwebを参考に今月始めたばかりで、少しずつ理解はしているつもりですが、
正直、ソースを公開しているサイトをほぼコピペして、
webページ(.php)、タブ区切りデータ(.txt)、JavaScript(.jp)の
3つのデータで1つのwebページを作っている状態です。
※webページ(.php)はこちらを参考にしましたhttp://phpjp.com/sample/g16DdYFFg0qDk4N9i+aQ2ILo …


そこで、下記のような複雑な表を作りたいと考えています。


1.)ページを開いたときに表示される表
※▲▼は昇順・降順ソートとします
※□はあらかじめ絞り込みの単語を入れた、プルダウンメニューとします

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区
03┃がんも┃○社┃北海道札幌市
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市
06┃マウス┃△社┃海外


2.)社名のメニューで「□社」を選択した場合

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市


3.)更に、商品名のメニューで「魚介」を選択した場合

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
04┃たたき┃□社┃高知県高知市


★こちらを作るにあたって、
http://vird2002.s8.xrea.com/javascript/tableEdit …
を参考にしましたが、各見出しにメニューを設置した場合、
上記3.)の更に絞り込むことができませんでした。



もう1点、上記1.)に戻り、住所で絞り込みたい場合、


1.)ページを開いたときに表示される表

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区
03┃がんも┃○社┃北海道札幌市
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市
06┃マウス┃△社┃海外


2.)住所下の住所メニュー「□1」を都道府県「東京都」で絞り込む

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区


3.)住所下の住所メニュー「□2」を市町村「港区」で絞り込む

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
01┃ちくわ┃○社┃東京都港区

※「□2」は「□1」の都道府県に基づく市町村がメニューとして表示される




どうか、ご回答宜しくお願い致します。


こういったテーブルは可能・不可能だけでもわかればと思っています。


何度も書いて申し訳ありませんが、初心者で勉強を始めたばかりですので、
こういったJavaScriptを1から作る際に便利な入門ページもあればお教えいただければ幸いです。

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

A 回答 (1件)

作り始める前に、仕様をもうちょっと見つめ直してみましょう。



まず、
1.初期状態では、表と、各プルダウンの中身はどおしておくのか?

2.商品名のメニューで「魚介」を選んだ場合の商品の検索ロジックは?
 ※プログラムで「魚介」から「たたき」を連想して抽出するのは超困難です。
  牛たたきもあるでしょうし、抽出用の商品分類コードを付加するとか、
  サーバー側で別途商品テーブルを準備するとか...

3.住所下の住所メニュー「□1」を都道府県「東京都」で絞り込んで、さらに
 「港区」で絞り込むロジックは?
 ※これも出来なくはないですが、面倒です。素直にコード化すれば、まず
  東京都を含む住所のデータを抽出した上で、プルダウンに東京都配下の
  住所をセットしなおし、選ばせて抽出し直す事になりますが、どの住所
  レベルまで繰り返すのかとか、都・道・府・県・郡・市・町・まちや
  地名表記の独自性や同名の地名を考慮すると超困難になります。
 ※とりあえず、地名にふくまれるキーワードの一回検索でお茶を濁すとか..

4.No.での▲▼は昇順・降順ソートは意味ありますか?
 ※もし、データが最初からNo.の順番で並んでいるなら、抽出してもその並び順
 のはずですから、あまり意味が無いような...
(No.の順に関係なくデータが格納されているなら意味ありますけど、むしろ
 商品名順とか、会社順、住所順、で並べ替え機能を持たせたほうが実用性が
 あると思います。

 次に実装方法ですが、javascript使用可能を前提としているなら、Ajax(XmlHttpRequest)
を使います。表は<table>要素、プルダウンは、<select>要素でもよいでしょう。
各<select>要素のonchangeのイベントで持って、選択されたキーワードをXmlHttpRequestで、サーバー側PHPに送ります、サーバー側はキーワードから次のキーワードリストを検索して<option>要素と<tr>を返します、これを受け取って次の<select>と<tbody>を書き換えるようにします。この辺の処理にはjavascriptのDOM関数を使います。
 テーブルのソートもjavascriptのDOM操作で可能です。

サーバー側の検索処理は、データをどのような型式で持っているかによります。
csvを配列に読み込んでおくとか、JSON型式で持つとか、XML型式で持つとか、
検索を考えるとDBを使うのが手っ取り早いですが、数100件ぐらいならXML型式
で準備して、DOM関数やXPath関数で検索するのが便利です。


※全部、フルスクラッチでコーディングするのがきつければ、出来合いの
ライブラリーを探すとか、jQueryのようなjavascriptのフレームワーク
ライブラリーを使うのも検討して見た方が楽に作れるでしょう。

※こつこつ作って見て、解らなかったら部分があったら、また、個別に質問を投
 げて見ましょう。丸投げの場合は、もうちょっと仕様を固めて、付けたしの
 お願いが発生しないようにしましょう。



  
    • good
    • 0
この回答へのお礼

お早いご回答誠にありがとうございます。
ご丁寧にアドバイスいただき、大変感謝致します。

補足いただきました内容としましては、

1.2.4.につきまして

No ┃商品名┃社名┃住所
▲▼┃□   ┃□ ┃□1:□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区
03┃がんも┃○社┃北海道札幌市
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市
06┃マウス┃△社┃海外

※例として上げた表の為、これ以上の商品数・社数はないものと仮定させていただきます。

※見出しについて、
Noは必ずしも順番とは限りません

※商品名メニュー
商品名と一致しない単語での絞り込みを行う予定の為、仮に「魚介」とした場合「たたき」を絞り込ませる例としてあげさせていただきました。
また、個人的に「牛のたたき」というなじみがないので「たたき=かつお」という概念になっておりました、誠に申し訳ございません。

※社名メニュー
○社、△社、□社 をメニューとして表示させておきます


3.やはり、困難なのですね。
それが分かっただけでも大変嬉しいです。




>>サーバー側の検索処理は、データをどのような型式で持っているかによります。
csvを配列に...

サーバはWebに公開するだけなので、レンタルサーバに現段階でデータはタブ区切りのテキストファイルにデータを置いています。
元のデータはエクセルで作っています。
.js、.phpは、テキストエディタで一から手打ちを行っています。


正直、今回の表が急に必要となり、知人に聞いたところ
「javascriptじゃない?」(知人はjavaは知っているがjavascriptは知らないようで)
くらいの助言をいただいただけで、本当手探りの状態でした。

最後の手段として質問させていただきましたが、本当に丁寧に回答いただき感謝しています。
コツコツですが、理解しながら頑張ってみたいと思います!!

お礼日時:2010/12/07 14:47

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

QjQuery要素の絞り込み + タグの追加 + ソート機能

jQuery要素の絞り込みボタンを<select></select>タグにしたいです。

下記のindex.html の種類のボタンに、select button.html の機能を追加したいですが

どなたかわかる方がいましたら教えて下さい

http://xfs.jp/tdevx

Aベストアンサー

移植すれば良いだけでは?

JavaScript:
$(function() {
$("#selects").change(function() {
var tags = $("#selects option:selected").val();
$("#sortwrapper").children().hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .tri").show();
} else {
$("#sortwrapper").children().hide();
}
});
});

HTML:
<select id="selects">
<option value="all">全て</option>
<option value="dogs">イヌ</option>
<option value="cats">ネコ</option>
<option value="birds">トリ</option>
</select>

プルダウンの中にボタンを入れたい訳ではありませんよね

移植すれば良いだけでは?

JavaScript:
$(function() {
$("#selects").change(function() {
var tags = $("#selects option:selected").val();
$("#sortwrapper").children().hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .tri").show();
} else {
$("#sortwrapper").children().hide();
}
});
});

HTML:
<select id="selects">
<option value="all">全て</option>
<optio...続きを読む

Qプルダウンとテキストの連動

お世話になります。プルダウン1を選択すると、プルダウン2の内容が切り替わり、さらにプルダウン2を選択すると、横のテキストフィールド内にテキストが入る(プルダウン2で選択した項目の説明)というようにしたいのです。プルダウン1をえらぶと2の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン3として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。

Aベストアンサー

とりあえず、簡単にソースを書いてみました。

<html>
<head>
<script type="text/javascript"><!--
msgtxt = new Array();
for (i=0; i<3; i++){
msgtxt[i] = new Array();
}

msgtxt[0][0]="a-1が選択されているときのメッセージ";
msgtxt[0][1]="a-2が選択されているときのメッセージ";
msgtxt[0][2]="a-3が選択されているときのメッセージ";
msgtxt[1][0]="b-1が選択されているときのメッセージ";
msgtxt[1][1]="b-2が選択されているときのメッセージ";
msgtxt[1][2]="b-3が選択されているときのメッセージ";
msgtxt[2][0]="c-1が選択されているときのメッセージ";
msgtxt[2][1]="c-2が選択されているときのメッセージ";
msgtxt[2][2]="c-3が選択されているときのメッセージ";


function selchg(){
sltd=document.f1.s1.selectedIndex;
if (sltd=="0"){
document.f1.s2.options[0].text="a-1";
document.f1.s2.options[1].text="a-2";
document.f1.s2.options[2].text="a-3";
}
else if (sltd=="1"){
document.f1.s2.options[0].text="b-1";
document.f1.s2.options[1].text="b-2";
document.f1.s2.options[2].text="b-3";
}
else if (sltd=="2"){
document.f1.s2.options[0].text="c-1";
document.f1.s2.options[1].text="c-2";
document.f1.s2.options[2].text="c-3";
}
}

function txtchg(){
x=document.f1.s1.selectedIndex;
y=document.f1.s2.selectedIndex;
document.f1.t1.value=msgtxt[x][y];
}
//--></script>
</head>
<body>

<form name="f1">
<select name="s1" onChange="selchg()">
<option>a
<option>b
<option>c
</select>

<select name="s2" onChange="txtchg()">
<option>a-1
<option>a-2
<option>a-3
</select>

<textarea name="t1"></textarea>
</form>

</body>
</html>

こんな感じでしょうか。

参考になれば幸いです。

とりあえず、簡単にソースを書いてみました。

<html>
<head>
<script type="text/javascript"><!--
msgtxt = new Array();
for (i=0; i<3; i++){
msgtxt[i] = new Array();
}

msgtxt[0][0]="a-1が選択されているときのメッセージ";
msgtxt[0][1]="a-2が選択されているときのメッセージ";
msgtxt[0][2]="a-3が選択されているときのメッセージ";
msgtxt[1][0]="b-1が選択されているときのメッセージ";
msgtxt[1][1]="b-2が選択されているときのメッセージ";
msgtxt[1][2]="b-3が選択されていると...続きを読む

QJSPで