重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

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

こんにちは。

テーブル<Table>内に複数の行があります。
そのうちある行のみを、ボタンクリックにより表示/非表示を切り替えたいのです。

非表示といっても文字を消すのではなく、行そのものを隠したいのです。

用途としては、カテゴリ名「飲み物」をクリックすると、属している項目「ジュース」「お茶」などの行が見えるようにしたいのです。

JavaScriptで以上のようなことを実装できないか模索しております。

ヒントでも結構ですので、お教えいただけると助かります。

よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (6件)

No.5ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

て～ぶるのなかには、ふくすうの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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/11/06 13:55

No.6

  • 回答者： think49
  • 回答日時：

<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属性値が同じであれば、消す列は幾らでも増やせます。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：

回答は出てますが・・・　こんなのではどうでしょうか？



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

No.3

  • 回答者： yyr446
  • 回答日時：

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

No.2

  • 回答者： yyr446
  • 回答日時：

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

No.1

  • 回答者： yugere
  • 回答日時：

こちらを参考にされてみてはどうでしょうか？



参考URL：http://hikky.udap.jp/moveJS/setHTML.htm#example
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報