メインメニュー

備忘録
備忘録 : javascript でテーブルの行の表示・非表示について
投稿者 : wye 投稿日時: 2008-12-04 16:20:36 (43048 ヒット)

javascript でテーブルの行の表示・非表示ではまったので、ここにメモときます。
参考:http://tenmon.g.hatena.ne.jp/aql/20080910/1221048984 (thanks)
1行目 開閉 /  2行目 開閉
TEST 1 TEST 2 TEST 3 TEST 4
1行目 あああ いいい ううう
2行目 セル結合
3行目 かかか ききき くくく
function open_close_row1(elm)
{
	var row = document.getElementById(elm);
	if (row.style.display == 'none') {
		row.style.display = 'block';
	} else {
		row.style.display = 'none';
	}
}
display = 'block'
FireFox 3 では開閉はおこなわれるが、表組みがおかしくなります。
IE 7 では開閉が正常に行なわれます。

1行目 開閉 /  2行目 開閉
TEST 1 TEST 2 TEST 3 TEST 4
1行目 あああ いいい ううう
2行目 セル結合
3行目 かかか ききき くくく
function open_close_row2(elm)
{
	var row = document.getElementById(elm);
	if (row.style.display == 'none') {
		row.style.display = 'table-row';
	} else {
		row.style.display = 'none';
	}
}
display = 'table-row'
FireFox 3 では開閉が正常に行なわれます
IE 7 では閉じた後、開かなくなります。

1行目 開閉 /  2行目 開閉
TEST 1 TEST 2 TEST 3 TEST 4
1行目 あああ いいい ううう
2行目 セル結合
3行目 かかか ききき くくく
function open_close_row3(elm)
{
	var row = document.getElementById(elm);
	if (row.style.display == 'none') {
		row.style.display = '';
	} else {
		row.style.display = 'none';
	}
}
display = ''
FireFox 3 ・ IE 7 とも正常に開閉できます。


印刷用ページ このニュースを友達に送る

コメント一覧

投稿ツリー


wye  投稿日時 2009/8/6 20:42 | 最終変更
ヨッシーさん、こんにちは。

3つ目をIE7で開閉すると、動作は問題ないのですが、エラーの発生を確認しました。

<a href="java script:void(0):" onClick="open_close_row3('test3_row1')">1行目 開閉</a>
↓
<a href="java script:void(0):" onClick="open_close_row3('test3_row1');return false;">1行目 開閉</a>

上記のように変更することで、エラーがでなくなりました。

情報ありがとうざいました。
ヨッシー   投稿日時 2009/8/6 19:43
IEで行の開閉を行うと
ページでエラーが発生しました。
と下記のエラーがでるのですが
Web ページ エラーの詳細
メッセージ: ';' がありません。
ライン: 1
文字: 8
コード: 0


Login
Register
LostPassword
PageTop
SiteTop
[ close ]
LOGIN
ユーザー名:

パスワード:


パスワード紛失 / 新規登録
LOGIN / PageTop / SiteTop