- ベストアンサー
ブルダウン選択でページの表示内容を絞り込みたい
私は、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
お礼
ありがとうございます！ 頂いたものををベースに書き換えてみたら、何とか9割がたまでできました！ あとの1割とは、表の冒頭行にある項目名の部分（<tr><th>）が、選択を切り替えると見えなくなってしまうのです… この行にはid指定はしていません。 どの選択肢にしても、冒頭行だけは常に表示できるようにする方法はありますでしょうか…？何度もすみませんm(__)m ちなみに、実際に作っているものでは、各行のidは「アルファベット1文字＋通し番号3桁」で、アルファベットに限らず通し番号になっています（従って番号は080まで存在します）。 スクリプトの{2}は{3}に変えてみました。