dポイントプレゼントキャンペーン実施中！

ブルダウン選択でページの表示内容を絞り込みたい

解決済

  • 質問者：HEERING
  • 質問日時：
  • 回答数：6件

私は、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内スクリプトとプルダウンメニューのタグを具体的にご教示頂けれると大変有難いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

たとえばこんな感じ



<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でやったほうが効率的な気がしますけどね
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
頂いたものををベースに書き換えてみたら、何とか9割がたまでできました！
あとの1割とは、表の冒頭行にある項目名の部分（<tr><th>）が、選択を切り替えると見えなくなってしまうのです…
この行にはid指定はしていません。

どの選択肢にしても、冒頭行だけは常に表示できるようにする方法はありますでしょうか…？何度もすみませんm(__)m

ちなみに、実際に作っているものでは、各行のidは「アルファベット1文字＋通し番号3桁」で、アルファベットに限らず通し番号になっています（従って番号は080まで存在します）。
スクリプトの{2}は{3}に変えてみました。

通報する
お礼日時：2007/05/21 15:48

No.6

  • 回答者： leap_day
  • 回答日時：

こんにちは



他の方の回答を使用して答えるのは横取りしているようで忍びないのですが・・・
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";

とつければ表示できます
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
お蔭様で既に作ったスクリプトに少し書き足すだけでうまくいきました！本当にありがとうございました！！

通報する
お礼日時：2007/05/21 21:31

No.5

  • 回答者： steel_gray
  • 回答日時：

グループでまとめられなかったんですね。


それでは私も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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

たびたびご親切に本当にありがとうございます。
ですが、既に作成したスクリプトに追加する形でお教え頂いたスクリプトも書くことになるのか、既存のスクリプトは使えなくなるのか、私の知識では理解できませんでした…
かなり高度なテクのようで…申し訳ありません。

通報する
お礼日時：2007/05/21 21:34

No.4

  • 回答者： steel_gray
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

steel_grayさんありがとうございます。
ただ、残念ながらtrをカテゴリ毎に固めて並べることは、コンテンツの性質上できないので、tbodyでまとめるのは難しいのです。
でも勉強になります。ありがとうございました!!!

通報する
お礼日時：2007/05/21 15:37

No.3

  • 回答者： steel_gray
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.1

selectの選択反応は onChange によって検知し


trは style="display:none" によって隠匿できるのでそれを操作する事によって可視不可視を制御できる

http://www.tohoho-web.com/js/onevent.htm#onChange
http://www.tohoho-web.com/css/reference.htm#disp …
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報