ベストアンサー

JSで、テーブルのある行のみ、非表示/表示を切り替えたい

2009/10/27 12:42

こんにちは。テーブル<Table>内に複数の行があります。そのうちある行のみを、ボタンクリックにより表示/非表示を切り替えたいのです。非表示といっても文字を消すのではなく、行そのものを隠したいのです。用途としては、カテゴリ名「飲み物」をクリックすると、属している項目「ジュース」「お茶」などの行が見えるようにしたいのです。 JavaScriptで以上のようなことを実装できないか模索しております。ヒントでも結構ですので、お教えいただけると助かります。よろしくお願いします。

dragstarsp
お礼率22% (84/379)

JavaScript
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2009/10/27 18:03 回答No.5

て～ぶるのなかには、ふくすうのtbodyをおくじょ。ここのそれらは、くりっくで、とぐるのたいしょうにしたじょ。そしてここのそれらの１ぎょうめだけ、ひょうじのとぐるのたいしょうからはずしてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> </head> <body> <table border="1"> 　<thead> 　　<tr><th>あれとか</th><th>これとか</th><th>それとか</th></tr> 　</thead> 　<tbody> 　　<tr><th>あいう</th><th>かきく</th><th>さしす</th></tr> 　　<tr><td>あいう</td><td>かきく</td><td>さしす</td></tr> 　　<tr><td>あいう</td><td>かきく</td><td>さしす</td></tr> 　</tbody> 　<tbody> 　　<tr><th>abc</th><th>def</th><th>ghi</th></tr> 　　<tr><td>abc</td><td>def</td><td>ghi</td></tr> 　　<tr><td>abc</td><td>def</td><td>ghi</td></tr> 　</tbody> </table>　　 <script type="text/javascript"> </script> </body> </html>

質問者

お礼 2009/11/06 13:55

ありがとうございました。採用させていただきました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

think49
ベストアンサー率59% (285/482)

2009/10/27 21:04 回答No.6

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/10/27 17:58 回答No.4

回答は出てますが・・・　こんなのではどうでしょうか？ <html> <head> <style type="text/css"> .selector input { margin-left:1.5em; } #food_table tr { display:none; } #food_table th, td { width:10em; border:1px solid gray; } </style> <script type="text/javascript">  </script> </head> <body> <div class="selector" onclick="test(event)"> <input type="checkbox" value="salad">サラダ <input type="checkbox" value="dish">料理 <input type="checkbox" value="drink">飲み物 <input type="checkbox" value="dessert">デザート </div> <p> <table id="food_table"> <tr class="salad"><th>サラダ</th><td>コールスロー</td><td>シーザーサラダ</td><td>グリーンサラダ</td></tr> <tr class="dish"><th>魚料理</th><td>ほたてのソテー</td><td>サーモンムニエル</td><td>ふくさし</td></tr> <tr class="dish"><th>肉料理</th><td>ビーフシチュー</td><td>仔豚のロースト</td><td>鴨とフォアグラのパイ包</td></tr > <tr class="drink"><th>ソフトドリンク</th><td>日本茶</td><td>ウーロン茶</td><td>ジュース</td></tr> <tr class="drink"><th>ドリンク</th><td>日本酒</td><td>ビール</td><td>ワイン</td></tr> <tr class="dessert"><th>フルーツ</th><td>完熟マンゴーのパフェ</td><td>マスクメロン</td><td>特選フルーツ盛合わせ </td></tr> <tr class="dessert"><th>デザート</th><td>カボチャのケーキ</td><td>ショコラセット</td><td>アイスクリーム</td></tr> </table> </body> </html>

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2009/10/27 17:20 回答No.3

回等＃2です。訂正{visibility:hidden},{visibility:visible} だと歯抜けのtableになってしまいます。 {display:none},{display:table-row}が適していますが、IE7.0等 {display:table-row}がサポートされてないのがあっるので、 {display:none},{display:block}で代用しました。 <head> <title></title> <style type="text/css"> .drink {display: none;} .food {display: none;} </style> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div> <input type="radio" name="sel" value="drink" checked>飲み物 <input type="radio" name="sel" value="food">食べ物 <input type="button" value="選択" onclick="disp_select();"> </div> <table> <tr class="drink"><td>お茶</td></tr> <tr class="food"><td>おにぎり</td></tr> <tr class="drink"><td>ジュース</td></tr> <tr class="food"><td>サンドイッチ</td></tr> </table> </body> </html>

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2009/10/27 15:48 回答No.2

CSSは後から追加したルールが有効になるので、それを利用して特定クラスのvisibilityプロパティを切り替えて表示・非表示させるJAVASCRIPTのサンプルを作ってみました。（おそらく、メモリーリークが増えていくでしょう。） <tr class="drink">の要素と<tr class="food">の要素を選択によって表示、非表示を切り替えます。（デフォルトは全て非表示） <head> <title></title> <style type="text/css"> .drink {visibility: hidden;} .food {visibility: hidden;} </style> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div> <input type="radio" name="sel" value="drink" checked>飲み物 <input type="radio" name="sel" value="food">食べ物 <input type="button" value="選択" onclick="disp_select();"> </div> <table> <tr class="drink"><td>お茶</td></tr> <tr class="food"><td>おにぎり</td></tr> <tr class="drink"><td>ジュース</td></tr> <tr class="food"><td>サンドイッチ</td></tr> </table> </body>

ログインすると、全ての回答が全文表示されます。