- ベストアンサー
ブルダウン選択でページの表示内容を絞り込みたい
私は、JavaScriptは既存のものを多少いじれても、0からプログラミングすることはできない、初級レベルです。恐縮ですがご教示下さい。 1つのページ上に、プルダウンメニューと長いテーブルがあります。 プルダウンメニューの選択肢は6つあり、どれかを選択すると、テーブルの中の一部の行（<tr>）だけが表示されるようにするのを、JavaScriptなどを使って単一のHTML上で実現することはできますでしょうか？ ちなみに、trは80行くらいあり、記載内容は6つにカテゴリ分けされています。 getElementsByIdを使う方法は見つけたのですが、同一idが複数存在してはいけないというルールで壁にぶつかっています… 例えば各trでのid設定を、内容のカテゴリに応じて tr id="aXX" tr id="bXX" tr id="cXX" tr id="dXX" tr id="eXX" tr id="fXX" のように、「a～fのいずれか＋2桁の通し番号」として全て固有な文字列にしたとして、セレクトメニューで例えば「a」と選んだら、idの中に文字列「a」を含むtr行だけを表示させる、ということは可能ですか？（idの一部の文字列から抽出対象を認識するということ） head内に、抽出したいidを80個も（更に今後も毎週増える）書くのは避けたいのです。 お手数ですが、head内スクリプトとプルダウンメニューのタグを具体的にご教示頂けれると大変有難いです。
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
たとえばこんな感じ <script language=javascript> function view(obj){ var v=obj.value; var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ var patern="^"+v+"[0-9]{2}$"; if(trs[i].id.match(patern) || v=="") trs[i].style.display='block'; else trs[i].style.display='none'; } } </script> <form> <select onChange="view(this)"> <option value="">絞込</option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> </select> </form> <table border> <tr id="a01"><td>a-1</td></tr> <tr id="a02"><td>a-2</td></tr> <tr id="b01"><td>b-1</td></tr> <tr id="b02"><td>b-2</td></tr> <tr id="c01"><td>c-1</td></tr> <tr id="c02"><td>c-2</td></tr> <tr id="d01"><td>d-1</td></tr> <tr id="d02"><td>d-2</td></tr> <tr id="e01"><td>e-1</td></tr> <tr id="e02"><td>e-2</td></tr> <tr id="f01"><td>f-1</td></tr> <tr id="f02"><td>f-2</td></tr> </table> ただ、idでやるよりclassでやったほうが効率的な気がしますけどね
その他の回答 (5)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 他の方の回答を使用して答えるのは横取りしているようで忍びないのですが・・・ 9割方完成されてるとのことなのでNo.2様の回答から iは先頭から0から始まりますのでその<th>がある<tr>のところの場所のdisplayをblockにしてやればいいです 例えば <table> <tr><th>内容</th></tr> <tr id="a01"><td>a-1</td></tr> (省略) <tr id="d02"><td>d-2</td></tr> <tr><th>内容2</th></tr> <tr id="e01"><td>e-1</td></tr> (省略) となってるとしたら<th>があるところは0番目と9番目になりますので function view(obj)内の else trs[i].style.display='none'; の後ろに trs[0].style.display = "block"; trs[9].style.display = "block"; とつければ表示できます
お礼
ありがとうございます！ お蔭様で既に作ったスクリプトに少し書き足すだけでうまくいきました！本当にありがとうございました！！
- steel_gray
- ベストアンサー率66% (1052/1578)
グループでまとめられなかったんですね。 それでは私も2さんが提案していたclassを利用したほうが何かと都合がいいような気がします。 ついでにテーブルのヘッダの問題もtheadで括る事で解決しています。 （あくまでテーブル先頭にあるものとした場合、テーブルないのあっちこっちにthがあるならもうちょっと考えないと） <html> <head> <script type="text/javascript"> <!-- function tbView(SEL) { var list = document.getElementById('table01').tBodies[0].getElementsByTagName('tr'); if(SEL.options[SEL.selectedIndex].value=='all'){ for(var i=0;i<list.length;i++) list[i].style.display = ''; return; } for(var i=1;i<SEL.options.length;i++){ for(var i=0;i<list.length;i++) { list[i].style.display = (list[i].className.indexOf(SEL.options[SEL.selectedIndex].value)>=0)?'':'none'; } } } //--> </script> </head> <body> <select onchange="tbView(this)"> <option value="all">全て表示</option> <option value="num">数字</option> <option value="hira">ひらがな</option> </select> <table id="table01"> <thead><tr><th>ヘッダ</th></tr></thead> <tbody> <tr class="hira"><td>あああ</td></tr> <tr class="num"><td>000</td></tr> <tr class="alpha"><td>aaa</td></tr> <tr class="hira num"><td>お001</td></tr> </tbody> </table> </body> </html>
お礼
たびたびご親切に本当にありがとうございます。 ですが、既に作成したスクリプトに追加する形でお教え頂いたスクリプトも書くことになるのか、既存のスクリプトは使えなくなるのか、私の知識では理解できませんでした… かなり高度なテクのようで…申し訳ありません。
- steel_gray
- ベストアンサー率66% (1052/1578)
#3です。 全部表示がなかったんでちょっと改良。 <html> <head> <script type="text/javascript"> <!-- function tbView(SEL) { if(SEL.options[SEL.selectedIndex].value=='all'){ var list = document.getElementById('table01').getElementsByTagName('tbody'); for(var i=0;i<list.length;i++) list[i].style.display = ''; return; } for(var i=1;i<SEL.options.length;i++){ document.getElementById(SEL.options[i].value).style.display = (SEL.options[i].selected)?'':'none'; } } //--> </script> </head> <body> <select onchange="tbView(this)"> <option value="all">全て表示</option> <option value="a">グループ１</option> <option value="b">グループ２</option> </select> <table id="table01"> <tbody id="a"> <tr><td>あああ</td></tr> <tr><td>いいい</td></tr> </tobdy> <tbody id="b"> <tr><td>ううう</td></tr> <tr><td>えええ</td></tr> </tobdy> </table> </body> </html>
お礼
steel_grayさんありがとうございます。 ただ、残念ながらtrをカテゴリ毎に固めて並べることは、コンテンツの性質上できないので、tbodyでまとめるのは難しいのです。 でも勉強になります。ありがとうございました!!!
- steel_gray
- ベストアンサー率66% (1052/1578)
trがいくつかのグループに分かれているなら、 <tbody>でグループ化するといいかと思います。 以下、適当ですがサンプル。 <html> <head> <script type="text/javascript"> <!-- function tbView(SEL) { for(var i=0;i<SEL.options.length;i++){ document.getElementById(SEL.options[i].value).style.display = (SEL.options[i].selected)?'':'none'; } } //--> </script> </head> <body> <select onchange="tbView(this)"> <option value="a">グループ１</option> <option value="b">グループ２</option> </select> <table> <tbody id="a"> <tr><td>あああ</td></tr> <tr><td>いいい</td></tr> </tobdy> <tbody id="b"> <tr><td>ううう</td></tr> <tr><td>えええ</td></tr> </tobdy> </table> </body> </html>
selectの選択反応は onChange によって検知し trは style="display:none" によって隠匿できるのでそれを操作する事によって可視不可視を制御できる http://www.tohoho-web.com/js/onevent.htm#onChange http://www.tohoho-web.com/css/reference.htm#display
関連するQ&A
- JavaScriptでテーブルの内容を抽出
JavaScriptを使いIEで動かしたいです。 IEのHTMLファイルに一つのテーブルが有ります。 そのテーブルの1列目のみをコンボボックスに抽出させることはできるでしょうか？ きっかけのイベントはなんでも構いません。又、テーブルは何の変哲もない下記のようなテーブルです。 <TABLE BORDER=1> <TR> <TD>A</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>B</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>C</TD><TD>123</TD><TD>123</TD> </TR> </TABLE> 上記の例ではA,B,Cをコンボに出したいのです。 お知恵をお貸しください。
- ベストアンサー
- JavaScript
- IE以外でdisplay:noneで隠したテーブルの行が詰められない
実は昨日投稿していったん解決して頂いた者です。ご回答下さった方ありがとうございます!! 改めて現状のご説明です。長くなりますがご容赦下さい。 1ページ上に、選択肢6つのプルダウンメニューと縦に長いテーブル（<tr>が数十行）があります。 プルダウンメニューで選択すると、テーブルの行表示が自動的に一部の行だけに絞り込まれる仕様になっています。 【スクリプト】 <script language=javascript> <!-- function view(obj){ var v=obj.value; var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ var patern="^"+v+"[0-9]{3}$"; if(trs[i].id.match(patern) || v=="") trs[i].style.display='block'; else trs[i].style.display='none'; trs[0].style.display = "block"; } } //--> </script> 【プルダウンメニュー】 <form> <select onChange="view(this)"> <option selected="selected">選択</option> <option value="a">ジャンルA</option> <option value="b">ジャンルB</option> <option value="c">ジャンルC</option> <option value="d">ジャンルD</option> <option value="e">ジャンルE</option> <option value="">すべて表示</option> </select> </form> 【テーブル】 ページ上のテーブル要素はここだけです。 1行目（ヘッダ行）より下のデータ行には、<tr id="プルダウンメニューに対応したアルファベット＋数字3桁">でIDを付けています。 <table border="1"> <tr><th>項目1</th><th>項目2</th></tr> <tr id="a030"> <td>あああああああああああ</td> <td>あああああああああああ</td> </tr> <tr id="b029"> <td>いいいいいい</td> <td>いいいいいい</td> </tr> <tr id="c028"> <td>う</td> <td>う</td> </tr> <tr id="d027"> <td>えええええええええええええええええええええ</td> td>えええええええええええええええええええええ</td> </tr> <tr id="e026"> <td>おおおおおおおおおおおおおおお</td> <td>おおおおおおおおおおおおおおお</td> </tr> <tr id="a025"> <td>あああああああああああ</td> <td>あああああああああああ</td> </tr> <tr id="b024"> <td>いいいいいい</td> <td>いいいいいい</td> </tr> <tr id="c023"> <td>う</td> <td>う</td> </tr> <tr id="d022"> td>えええええええええええええええええええええ</td> td>えええええええええええええええええええええ</td> </tr> <tr id="e021"> <td>おおおおおおおおおおおおおおお</td> <td>おおおおおおおおおおおおおおお</td> </tr> ・ ・下に続く ・ </table> このページをFireFox1.5、Nescape7で確認すると以下2点の不具合が発生してしまうのです。 (1)ヘッダ行の幅が下のデータ行に揃わない（短くなる）。 (2)もっと行数が増えると、プルダウンメニュー選択でdisplay:noneで非表示にした行が余白としてぽっかり空いてしまう。 IEではヘッダ行がデータ行に揃い、非表示の行はきちんと上に詰められてまともな表になるのです。 Mozilla系専用のスクリプトを書き足す必要があるのかと思うのですが、全く知識不足で見当がつきません… 申し訳ございませんがご教示のほどお願い致します。
- ベストアンサー
- JavaScript
- TBテーブルの表示位置
テーブルを作成し、テーブル自体は思い通り表示されたのですが、テーブルが表示されるのがページのかなり下のほうなのです。 文字列のすぐ下に表示したいのですが、どうしても表示できません。 文字列のすぐ下に表示する方法をご教授下さい。 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> <CENTER> <H1>文字列</H1> <TABLE BORDER> <TR>・・・・・（テーブルの中身）</TR> </TABLE> </CENTER> </BODY> </HTML>
- ベストアンサー
- HTML
- javascriptのプルダウンで項目外の表示可否
javascriptのプルダウンで一覧から項目を選択したら、プルダウンに表示する文字を一覧とは違うものに出来るかどうか。 説明文が分かりにくかったら申し訳ございません。 図と文字で説明すると以下のような感じです。 ============================ 前提：リストに表示させる項目は「ああああ」「いいいい」「うううう」 １．まず、プルダウンを開きます。 ［ ▽］ ――――― ｜ああああ｜ ｜いいいい｜←「いいいい」を選択する ｜ううううう ｜ ――――― ２．項目を選択する。 ［２番目▽］←「いいいい」を選択したが、「２番目」とプルダウンに表示させる。 ３．またプルダウンリストを開く ［２番目▽］ ――――― ｜ああああ｜ ｜いいいい｜ ｜ううううう ｜ ――――― 「２番目」と表示されたまま最初にあった全ての項目が表示される。 プルダウンは複数行あるグリッド（javascriptでもこの部品名か分かりませんが、エクセルみたいに動作する部品です）でＡ列に同じ種類が置かれます。 ↓こんな感じで Ａ列 ｜ Ｂ列 ｜ Ｃ列 ｜←ヘッダ部 ―――――――――――― [ ▽]｜ ｜ ｜ ←ボディ ―――――――――――― [ ▽]｜ ｜ ｜ ―――――――――――― [ ▽]｜ ｜ ｜ ―――――――――――― ============================ 上記のような動作はjavascriptでは可能でしょうか？ javascriptは門外漢で、プログラマーにjavascriptでは出来ない！と言われてしまっているのですが、VB的には出来るのだからjavascriptでも出来るのではないかと思っています。 ただ、動作させる場所がweb上なので自分が思っているものとは制限が違うのではないかもと思い、意見を言えない状態です。 ご存知のいらっしゃいましたら ・可能か否か 出来れば ・どのような作り方であれば実現できそうか （プルダウンを開いた時と閉じた時で処理を走らせればいいとか簡単でいいので） などを教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSでレイアウト divで囲んだ枠にtableを入れるとブラウザによって表示が異なる
お世話様です。 CSSでレイアウトしたウェブサイトを作成中です。 簡単に書くと・・・ <div id="style_a"> 文字列Ａ <table> <tr><td></td></tr> </table> 文字列Ｂ </div> ＩＥでは、style_aがテーブル後の文字列Ｂにも反映されるのですが、 FirefoxとOperaでは、テーブルの前の部分でstyle_aが無効になりテーブルと文字列Ｂはデフォルトに戻ってしまいます。 このような場合、どのように設定すればいいのでしょうか？ ちなみに間のテーブルはレイアウトとしてではなくデータを表として表示したいので使っています。 どうか教えてください。
- ベストアンサー
- CSS
- カテゴリをクリックして、リンク先一覧を表示させたい
テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。 次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。 しかも２回クリックしないと表示されません（泣 「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.visibility = "hidden"; else ID01.style.visibility = "visible"; flag = !flag; } function pullDown02() { if(flag) ID02.style.visibility = "hidden"; else ID02.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク１</a><BR> <BR> <A href="javaScript:pullDown02()">リンク２</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- 締切済み
- HTML
- mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい
javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- ベストアンサー
- JavaScript
- テーブルを左右に並べて表示させたいのですが
テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、（左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって）下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。（CSS使ったことがありません。） ご存知の方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- 【javascript・PHP】プルダウン選択後、表示する金額を瞬時に
【javascript・PHP】プルダウン選択後、表示する金額を瞬時に変更する方法。 大変困っております。 今回はjavascriptとPHPを組み合わせたコーディングを行おうとしているのですが、 プルダウンを選択した直後、どれを選択したかにより、phpの関数「$price」に代入する値を変えるような仕様に変更したいのです。更に、その$priceに入れる値はデータベースで入力した金額を反映させたいのですが、うまくいきません。 かなり分かりづらいのですが、以下に一連の流れの例を記入します。 例） ----------------------------------------------------------- データベースの二つのテーブルがあり、 一つのテーブル(priceとします)の列には「price_A」と「price_B」というデータが、 もう一つのテーブルの列(dealerとします)には「店名」があります。 プルダウンに表示する内容はdealerテーブルの「店名」列に格納されている「A店」と「B店」を表示させます（データベースから取得し、プルダウンに反映） ここで、プルダウンで「A店」を選択すると、phpの関数（$price）にpriceテーブルの「price_A」の金額を代入し、 「B店」の選択すると、$priceに「price_B」の金額を代入します。 ----------------------------------------------------------- そして以下は現在記入しているjavascriptの問題である箇所を抜粋しました。 確実に間違いがあるのは分かっていますが、できればその解決策の伝授をお願いします。 ※PHP文内に書いているので、echoを使用しています。 <?php echo '<script type="text/javascript">'; echo 'function check1() {'; echo 'var a;'; echo 'a = document.myform.dealer.value;'; echo 'if (a == "問屋A") {'; $price = $row["dealerA_price"]; // 要改善1 echo '} else if (a == "問屋B") {'; $price = $row["dealerB_price"]; // 要改善2 echo '} } </script>'; ?> どうかよろしくお願いします。不明な点は随時補足にて記述させていただきます。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ 頂いたものををベースに書き換えてみたら、何とか9割がたまでできました！ あとの1割とは、表の冒頭行にある項目名の部分（<tr><th>）が、選択を切り替えると見えなくなってしまうのです… この行にはid指定はしていません。 どの選択肢にしても、冒頭行だけは常に表示できるようにする方法はありますでしょうか…？何度もすみませんm(__)m ちなみに、実際に作っているものでは、各行のidは「アルファベット1文字＋通し番号3桁」で、アルファベットに限らず通し番号になっています（従って番号は080まで存在します）。 スクリプトの{2}は{3}に変えてみました。