javascriptを使って、指定行以降の非表示

解決済

質問者：suhixinkusu
質問日時：2012/08/28 11:03
回答数：5件

●鈴木　翔
血液型　　｜A
趣味　　　｜料理
友達　　　｜3人
名前　　　｜関係
鈴木　啓　｜兄
渡辺　史郎｜同級生
中野　剣　｜同級生

上記のようなHTMLのtableがあります。
一番上の●はボタンです。
このボタンを押すと下記のように
5行目以降を非表示にしたいです。
もう一度押すと上記に戻したいのですが、
出来ますでしょうか？

●鈴木　翔
血液型　　｜A
趣味　　　｜料理
友達　　　｜3人

因みに・・・
tableは他にもあります。
佐藤という人もいるので、
javascriptでtableのidを
受け取りそれの5行目以降を
非表示にするみたいな方法を望んでいます。

通報する

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

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： LancerVII
回答日時：2012/08/28 11:25

こんにちは。

jQueryを併用するととても少ない記述で実装でき、こんな感じになります。

==== JavaScript
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
// tableタグにあるbuttonのクリックイベント
$('table button').click ( function() {
// クリックされたボタンの親要素であるtableの中のtbodyタグをtoggle()する
// toggle()は表示されていたら非表示、非表示の場合は表示する
$(this).parents('table').find('tbody').toggle();
});
});
</script>

==== HTML
<table>
<thead>
<tr><th><button type="button">●</button></th><td>鈴木　翔</td></tr>
<tr><th>血液型</th><td>A</td></tr>
<tr><th>趣味</th><td>料理</td></tr>
<tr><th>友達</th><td>3人</td></tr>
</thead>
<tbody>
<tr><th>名前</th><th>関係</th></tr>
<tr><td>鈴木　啓</td><td>兄</td></tr>
<tr><td>渡辺　史郎</td><td>同級生</td></tr>
<tr><td>中野　剣</td><td>同級生</td></tr>
</tbody>
</table>
<table>
<thead>
<tr><th><button type="button">●</button></th><td>鈴木　翔</td></tr>
<tr><th>血液型</th><td>A</td></tr>
<tr><th>趣味</th><td>料理</td></tr>
<tr><th>友達</th><td>3人</td></tr>
</thead>
<tbody>
<tr><th>名前</th><th>関係</th></tr>
<tr><td>鈴木　啓</td><td>兄</td></tr>
<tr><td>渡辺　史郎</td><td>同級生</td></tr>
<tr><td>中野　剣</td><td>同級生</td></tr>
</tbody>
</table>

この回答への補足

記述方法が違ってたのか解りませんが、
直りました。

jquery使わない方法もありがとうございました。
こちらを使用させていただきます。

補足日時：2012/08/28 13:46

通報する

- 0
- 件

通報する

この回答へのお礼

何故かエラー出ました。
jquery分からないです。

ご回答ありがとうございます。

通報する

お礼日時：2012/08/28 12:01

No.5

回答者： LancerVII
回答日時：2012/08/28 13:11

No.4です。

何度もすみません。
先ほどのHTMLはそのままです、は間違いで、buttonにvalueにて値を与えてください。

0から始まって上から順番に付けるイメージです。

<button type="button" value="0">●</button>
・
・
<button type="button" value="4">●</button>

- 0
- 件

通報する

No.4

回答者： LancerVII
回答日時：2012/08/28 12:58

こんにちは。

こちらではエラーになっていないので何でだかはわかりませんが、jQueryを併用しないのであれば以下のような感じになると思います。
(HTMLの構成は先程と一緒です。<tbody></tbody>を切り替えたいエリアとします)

==== JavaScript
window.onload = function() {
var btn = document.getElementsByTagName('button');
for ( var i = 0; i < btn.length; i ++ ) {
btn[i].onclick = function() {
var tbl = document.getElementsByTagName('tbody')[this.value];
tbl.style.display =
tbl.style.display == 'none' ? 'block' : 'none';
};
}
};

- 0
- 件

通報する

No.3

回答者： ymda
回答日時：2012/08/28 12:34

＃１です。

手抜きですという前提で書き込みはしましたが、
逆に、同じJavaScriptを1000回実行するどころか
友達をそのページに1000人も表示するというのが
逆にナンセンスかもしれません。

ある程度の１ページの最大人数を設定してページを
表示するのが、今の理想かもしれません。
＃１０件とか２０件ですと、極度ですので、１００件あたりが良いかと

JavaScriptの前に、HTML表示が重くなります。

- 0
- 件

通報する

この回答へのお礼

1000件は言い過ぎましたが、
もしそうなった場合は
そのようにして回避するのですね(汗)

ご回答ありがとうございます。

通報する

お礼日時：2012/08/28 12:53

No.1

回答者： ymda
回答日時：2012/08/28 11:20

こんにちわ。

少々手抜きになりますが・・・

<html><head>
<script type="text/javascript"></script>
</head><body>

<form>
<input type="button" onclick="Display('test1','block');Display('test2','block');Display('test3','block');">ほげ
</form>
ほげたいとる
<table>
<tr><td>ほげほげ</td></tr>
<tr><td style="display: none;" id="test1">ほげほげ</td></tr>
<tr><td style="display: none;" id="test2">ほげほげ</td></tr>
<tr><td style="display: none;" id="test3">ほげほげ</td></tr>
</table>

<form>
<input type="button" onclick="Display('test4','block');Display('test5','block');Display('test6','block');">ほげ
</form>
ほげたいとる
<table>
<tr><td>ほげほげ</td></tr>
<tr><td style="display: none;" id="test4">ほげほげ</td></tr>
<tr><td style="display: none;" id="test5">ほげほげ</td></tr>
<tr><td style="display: none;" id="test6">ほげほげ</td></tr>
</table>
</body></html>