- ベストアンサー
JSで、テーブルのある行のみ、非表示/表示を切り替えたい
こんにちは。 テーブル<Table>内に複数の行があります。 そのうちある行のみを、ボタンクリックにより表示/非表示を切り替えたいのです。 非表示といっても文字を消すのではなく、行そのものを隠したいのです。 用途としては、カテゴリ名「飲み物」をクリックすると、属している項目「ジュース」「お茶」などの行が見えるようにしたいのです。 JavaScriptで以上のようなことを実装できないか模索しております。 ヒントでも結構ですので、お教えいただけると助かります。 よろしくお願いします。
- dragstarsp
- お礼率22% (84/379)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
て～ぶるのなかには、ふくすうの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"><!-- //@cc_on /*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener (/*@end@*/ 'load', (function ( ) { return function ( evt ) { var doc = evt.ownerDocument || document doc./*@if(@_jscript) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/ 'click', (function ( get, getCSS ) { return function ( evt ) { var e = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; var tb = get( e, 'nodeName', 'TBODY' ); if(! tb ) return; var tr = tb.getElementsByTagName( 'TR' ); for( var cnt = 1, obj ; obj = tr[ cnt++ ]; ) obj.style.display = 'none' === getCSS( obj, 'display') ? 'table-row': 'none'; };})( function ( n, t, v ) { return n ? (v == n[t]) ? n: arguments.callee(n.parentNode, t, v): null; }, function ( e, s ) { return e.nodeType == 1 ? /*@if(@_jscript) e.currentStyle[ s ] @else@*/ document.defaultView.getComputedStyle( e, null )[ s ] /*@end@*/ : null; } ), false); };})(), false); //ぜんかくくうはくは、はんかくにでもなおしてね。 //--> </script> </body> </html>
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
<style type="text/css"></style> の内容を書き換える方法で書いてみました。 --- <script type="text/javascript"> document./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (evt) { var t = evt.target || evt.srcElement; if(t.parentNode.id != 'toggleSwitch' || t.nodeName != 'INPUT'){ return false; } var style = document.getElementsByTagName('head')[0].lastChild; var cssText = style.firstChild ? style.firstChild.nodeValue : ''; var reg = new RegExp('(?:^|\\n)#test \\.' + t.className + '\\s*{.*(?=\\n|$)'); if(reg.test(cssText)){ cssText = cssText.replace(reg, ''); } else { cssText += "\n#test ." + t.className + '{ display: none; }'; } if(style.firstChild) style.removeChild(style.firstChild); style.appendChild(document.createTextNode(cssText)); },false); </script> <style type="text/css"></style></head> <body> <form id="toggleSwitch"> <input type="button" class="drink" value="飲み物"> <input type="button" class="fruit" value="フルーツ"> <input type="button" class="noodle" value="麺類"> </form> <table id="test"> <tr class="drink"><td>オレンジジュース</td><td>紅茶</td><td>コーヒー</td><td>ミルク</td></tr> <tr class="fruit"><td>バナナ</td><td>リンゴ</td><td>ぶどう</td><td>みかん</td></tr> <tr class="noodle"><td>ラーメン</td><td>パスタ</td><td>そば</td><td>うどん</td></tr> </table> --- #test .drink{ display: none; } が存在したら削除し、存在しなかったら挿入します。 inputとtrのclass属性値が同じであれば、消す列は幾らでも増やせます。
- fujillin
- ベストアンサー率61% (1594/2576)
回答は出てますが・・・ こんなのではどうでしょうか？ <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"> <!-- function test(evt) { var e = evt.target || evt.srcElement; if (e.nodeName == 'INPUT') { var i, e = e.parentNode.childNodes, list = {}; for (i=0; i<e.length; i++) if (e[i].nodeName == 'INPUT' && e[i].checked) list[e[i].value] = true; e = document.getElementById('food_table').getElementsByTagName('TR'); for (i=0; i<e.length; i++) e[i].style.display = list[e[i].className]?'block':''; } } // --> </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)
回等＃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"> <!-- function disp_select(){ var selection=document.getElementsByName("sel"); for(var i=0;i<selection.length;i++){ if(selection[i].checked){ disp_chg(selection[i].value,"on"); }else{ disp_chg(selection[i].value,"off"); } } } function disp_chg(selection,sw){ var selector="." + selection; var rule; if(sw=="on"){ rule="display:block;"; }else{ rule="display:none;"; } var CssSheet; if(document.styleSheets.length == 0){ CssSheet=document.styleSheets[0]; }else{ CssSheet=document.styleSheets[document.styleSheets.length-1]; } if(CssSheet.addRule){ CssSheet.addRule(selector , " { " + rule + " }",CssSheet.rules.length+1); }else{ CssSheet.insertRule(selector + " { " + rule + " }",CssSheet.cssRules.length); } } // --> </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)
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"> <!-- function disp_select(){ var selection=document.getElementsByName("sel"); for(var i=0;i<selection.length;i++){ if(selection[i].checked){ disp_chg(selection[i].value,"on"); }else{ disp_chg(selection[i].value,"off"); } } } function disp_chg(selection,sw){ var selector="." + selection; var rule; if(sw=="on"){ rule="visibility: visible;"; }else{ rule="visibility: hidden;"; } var CssSheet; if(document.styleSheets.length == 0){ CssSheet=document.styleSheets[0]; }else{ CssSheet=document.styleSheets[document.styleSheets.length-1]; } if(window.ActiveXObject){ CssSheet.addRule(selector , " { " + rule + " }",CssSheet.rules.length+1); }else{ CssSheet.insertRule(selector + " { " + rule + " }",CssSheet.cssRules.length); } } // --> </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>
- yugere
- ベストアンサー率37% (48/127)
こちらを参考にされてみてはどうでしょうか？
関連するQ&A
- DHTMLでテーブルの行の表示・非表示を切り替える。
こんにちは。 WEBアプリケーションのモックアップを作成しています。 自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。 同一画面内のリンクがクリックされた場合に・・・ テーブルの行の表示、非表示を切り替えたいのです。 <!-- ========================= --> <!-- テーブル１ --> <table border="1"> <tr> <td>ヘッダ１</td> <td>ヘッダ２</td> </tr> <!-- ☆☆☆ ここから ☆☆☆ --> <tr> <td>111</td> <td>aaa</td> </tr> <tr> <td>222</td> <td>bbb</td> </tr> <!-- ☆☆☆ ここまで消したい ☆☆☆ --> </table> <!-- テーブル２ --> <table border="1"> <tr> <td>ヘッダA</td> <td>ヘッダB</td> </tr> <tr> <td>あああ</td> <td>いいい</td> </tr> </table> <!-- ========================= --> <tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。 そこで、テーブル１を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。 これは上手くいったのですが、非表示にした場合、テーブル２との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。 あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。 何か良い方法がありましたら、ご教授願います。 ターゲットのブラウザは… IE5.5～IE7 です。
- ベストアンサー
- HTML
- Excel ハイパーリンクによる非表示行の表示・非表示
一枚のExcelワークシート上にかなりの行に渡る商品情報が入っています。商品はいくつかのカテゴリーに分かれていて、いくつかのグループに分けられます。全ての行を表示するとかなり多いため、下に長い表になります。そこで必要なカテゴリー（グループ）の詳細情報のみ照会するため、まずは大項目（カテゴリー）の1行目のみ表示し、それ以外の詳細行は予め非表示にしておきたいと思います。（こうすることで表は縦方向に短くできます。）この複数の非表示行は大項目の1行目のあるセルをクリックすれば全て表示できるようにし、照会が終ればまた簡単な作業で非表示に戻るような仕組みにしたいと思います。 ハイパーリンクで非表示行のあるセルを指定してみましたが、どうも非表示行はハイパーリンクのセルをクリックしただけでは表示されないようです。 どうすれば、1回のクリックだけで同じグループの全ての商品行をいっぺんに表示・非表示にできるでしょうか？ご存知の方がいらっしゃいましたら是非ご教授下さい。
- 締切済み
- その他(業務ソフトウェア)
- リストボックスの全行表示
リストボックスをクリックした時の表示行数は決まっていますよね。これを、例えば２０行あれば、クリックしたときに２０行全部最初のクリックで表示するようにできますか？ ＃「HTML」のカテゴリーで質問→javascriptならできるかなという助言があったので、こちらで質問させて下さい。 ＃複数行の表示(size="")のことではありません。 ＃どうも見えない部分を認識してくれないユーザーさんがあるので、それへの対応です。
- ベストアンサー
- JavaScript
- 画面表示とともにtableの指定の行位置を表示
htmlの一部に 高さ指定（150px程度）のtableを作成し、 見出しは固定で、 内容は縦スクロールによって、見られるようにしている情報があります。 内容は月毎の予定のような情報になります。 これをこのhtmlを表示すると同時に JavaScriptで本日の日付（月）を取得し、該当の「月」の行に移動させたいのです。 tableの上に、1月、2月、3月、4月・・・とアンカー指定でジャンプできるように設定し 該当月をクリックすればその月の行にジャンプすることはできています。 これを、クリックしないで 「今月」の位置にジャンプさせて表示したいのです。 なかなかうまくいきません。 どなたか、アドバイスをお願いします。
- ベストアンサー
- JavaScript
- jQueryでテーブル行の表示・非表示
JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を 切り替えるスクリプトを以下のように作成しましたが うまく動きません。 dispChg()内で 非表示に設定したクラス名(hid)を追加し 全行を非表示にできていますが 次の該当trから 非表示に設定したクラス名(hid)の削除がうまくいかないようです。 JavaScriptの引数からクラス名を引き継げないのでしょうか。 どなたか修正できる方がいらっしゃいましたら 教えてください。 よろしくお願いいたします。 <html> <head> <title>test</title> <style type="text/css"> <!-- .hid { display:none } --> </style> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> <!-- function dispChg(trClass){ /* まず全行を非表示 */ $('tr[class]').addClass('hid'); /* 該当の行を表示 */ $('tr[class*=trClass]').removeClass('hid'); } --> </script> </head> <body bgcolor=#ffffff topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <input type="button" value="全部表示" onclick="dispChg('atype btype ctype dtype')"> <input type="button" value="a" onclick="dispChg('atype')"> <input type="button" value="b" onclick="dispChg('btype')"> <input type="button" value="c" onclick="dispChg('ctype')"> <input type="button" value="d" onclick="dispChg('dtype')"> <table border="1"> <tr class="atype"><td>a</td></tr> <tr class="btype"><td>b</td></tr> <tr class="ctype"><td>c</td></tr> <tr class="dtype"><td>d</td></tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptでテーブルの行入れ替え
Javascriptでtable内の行を上下に移動させたいと思います。 横に↑ボタンと↓ボタンを用意し、クリックした分だけ上下に移動させるのが理想です。 ライブラリはJQueryやその外部ライブラリであれば使用可能ですが、 行内の要素(<TD>タグやその属性等)は別の処理で直接触りたい為、TABLE以下のタグが ライブラリの使用者から隠蔽されるようなライブラリの使用は難しいです。 ご存知の方がいらっしゃいましたらご回答の程、よろしくお願いします。
- ベストアンサー
- JavaScript
- ピボットテーブルの行に入る項目数
恐らく、知っている人には超簡単なことなのでしょうが。。。 どうやったらいいのかわりませんので、どなたか教えてください。 エクセル２０００を使っています。 ピボットテーブルで表を作成しようと思うのですが、「行」の部分に７個目の項目を入れようとすると、下記のメッセージが出てうまくできません。 「行アイテムまたは列アイテムが多すぎるため、変更できません。１つ以上の行フィールドまたは列フィールドをピボットテーブルから、またはページ位置にドラッグしてください。または、フィールドを右クリックし、ショートカットメニューの［表示しない］または［レベルを表示しない］をクリックします。」 しかしながら、他の人のパソコン（同じエクセル２０００）にファイルを転送して同様の作業をすると、７個目の項目も問題なく入ります。 恐らく私のエクセルの設定に問題があると思うのですが、どこにその項目があるかわかりません。 よろしくお願いいたします。
- ベストアンサー
- オフィス系ソフト
- テーブルで複数行をまとめて非表示にしたいです
よろしくお願い致します。 以下の記述でエラーが出てしまいます。 見よう見まねで書いているので、根本的に間違っているのでしょうか・・・。 function open_close_hide(){ var row = document.getElementsByClass('hide'); if (row.style.display == 'none') { row.style.display = ''; } else { row.style.display = 'none'; } } テーブルの非表示にしたい行は<tr class = "hide">としています。 クリックする部分は <a href=\"javascript:void(0):\" onClick=\"open_close_rowhide();return false;\">表示/非表示</a> としています document.getElementByIDで一行ごとに非表示にするのには成功したのですが、 classで複数行を同時非表示にすることが出来ません。 getElementsByClassNameでも駄目でした。 詳しい方がおられましたら、よろしくお願い致します。
- ベストアンサー
- JavaScript
- テーブルを左右に並べて表示させたいのですが
テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、（左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって）下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。（CSS使ったことがありません。） ご存知の方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- チェックボックスtableの行の複数選択
jqueryをやっています。 始めて数週間です。 tableは一番左列がチェックボックスで、一番左列のヘッダ行がチェックボックスです。 やりたいことは、一番左の列にチェックボックスがあるtableをjqueryで操作して、 1.チェックボックス列以外の列をクリックしたときチェックボックスをONにする 2.チェックがついた行は背景色を変える 3.マウスオーバー中に1行ハイライト表示する 4.一番左のヘッダのチェックボックスONで全行の背景色を変える。 参考にしたサイトは以下のサイトです。 http://kachibito.net/snippets/table-tr-check ここはバグがあって一番左のチェックボックスはクリックしてもONになりません。 いろいろ調べて左列のチェックボックスONのとき、行クリックのイベントに行っているみたいです。 チェックONの行の背景色をつけたりもしたいのですが、よくわかりませんでした。 ヒントだけでも教えてもらえないでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。採用させていただきました。