こんにちは。
テーブル<Table>内に複数の行があります。
そのうちある行のみを、ボタンクリックにより表示/非表示を切り替えたいのです。
非表示といっても文字を消すのではなく、行そのものを隠したいのです。
用途としては、カテゴリ名「飲み物」をクリックすると、属している項目「ジュース」「お茶」などの行が見えるようにしたいのです。
JavaScriptで以上のようなことを実装できないか模索しております。
ヒントでも結構ですので、お教えいただけると助かります。
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
て~ぶるのなかには、ふくすうのtbodyをおくじょ。
ここのそれらは、くりっくで、とぐるのたいしょうにしたじょ。
そしてここのそれらの1ぎょうめだけ、ひょうじのとぐるの
たいしょうからはずしてみました。
<!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>
No.6
- 回答日時:
<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属性値が同じであれば、消す列は幾らでも増やせます。
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">
<!--
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>
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">
<!--
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>
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">
<!--
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
テーブルで複数行をまとめて非表示にしたいです
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
至急!GetElementById でtdの...
-
テーブル行のクリックでチェッ...
-
一覧から選択した行の行番号を...
-
jQueryで行の移動
-
別ページからOnclickでテーブル...
-
JavaScriptで特定のtdタグにcla...
-
ハイパーリンクを別ウインドウ...
-
「オブジェクトは、このプロパ...
-
チェックボックスにチェックが...
-
jquery datatablesを使用 イン...
-
tableの任意行にfocusをあてる
-
Jquery on click 発火しない
-
Selenium.ChromeDriverの使い方...
-
ドラッグ&ドロップしたらその...
-
td:nth-childを使ってa要素を取...
-
特定タグの文字を抽出するには
-
【JQuery】テーブルで行選択さ...
-
【jQuery】input nameの文字列...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
一覧から選択した行の行番号を...
-
チェックボックスにチェックが...
-
プルダウンで選択すると、DBの...
-
至急!GetElementById でtdの...
-
【UWSC】HTML内のある部分を抽...
-
セルをドラッグで選択するときに、
-
マウスをブラウザの外に出した...
-
「オブジェクトは、このプロパ...
-
JavaScriptでテーブルの行入れ替え
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
テーブルの変数について
-
javascript クリックすると、あ...
-
別ページからOnclickでテーブル...
-
スクロールバーの表示位置を変...
-
JSで、テーブルのある行のみ、...
おすすめ情報