46
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptを使用したdisplayプロパティの実装メモ

Last updated at Posted at 2015-02-06

JavaScriptを使用したdisplayプロパティの実装メモ

メモ

出向先で実装するように言われたので実装しました。
JavaScriptを使用したdisplay のメモです。div と tr で若干違うのでメモ。
Webページの一部を折りたたんで表示する際に、JavaScriptで要素のdisplayプロパティを書き換えることがよく行われます。divなどのブロックレベル要素の場合、「要素.style.display = 'none';」でその要素が非表示になり、「要素.style.display = 'block';」で表示されます。ところが、この手法を使って、表のある行(tr要素)の表示/非表示を切り替えようとしたところInternet Explorerでは希望通りの動作になりましたが、その他のブラウザでは表が崩れてしまうようですのでその対応メモ。

div のdisplay


<select name="Goods" onchange="chkSelect();">
	<option value="hoge" >ほげ</option>
	<option value="piyo" >ぴよ</option>
	<option value="fuga" >ふが</option>
</select>

<div style="display: block;" id="default">
でふぉると
</div>

<div style="display: none;" id="hoge">
ほげ
</div>

<div style="display: none;" id="piyo">
ぴよ
</div>

<div style="display: none;" id="fuga">
ふが
</div>


イベントドリブン箇所

function chkSelect() {
	$val = $("select[name='Goods']").val();
	
	if($val == 'hoge'){
		document.getElementById("hoge").style.display="block";
	}else {
		document.getElementById("hoge").style.display="none";
	}
	
	if($val == 'piyo'){
		document.getElementById("piyo").style.display="block";
	}else {
		document.getElementById("piyo").style.display="none";
	}
	
	if($val == 'fuga'){
		document.getElementById("fuga").style.display="block";
	}else {
		document.getElementById("fuga").style.display="none";
	}
}

テーブル箇所メモ

HTML 4.0やXHTML 1.0等では、tr要素はブロックレベル要素には含まれていないため"block"ではなく代替として''を使用することになります。Internet Explorerだけ例外なのはInternet Explorerオレオレ仕様だからだそうです。

tr のdisplay


<table>
	<tr id="default" style="">
		<td>でふぉると</td>
	</tr>

	<tr id="toggle_row_1" style="display: none;">
		<td>ほげ</td>
	</tr>
	<tr id="toggle_row_2" style="display: none;">
		<td>ふが</td>
	</tr>
	<tr id="toggle_row_3" style="display: none;">
		<td>ぴよ</td>
	</tr>
</table>

<input id="" name="" type="button" value="項目を追加する" onclick="return toggle_row();">

イベントドリブン箇所

var cnt = '1';

function toggle_row() {
	var obj1 = document.getElementById('toggle_row_1');
	var obj2 = document.getElementById('toggle_row_2');
	var obj3 = document.getElementById('toggle_row_3');
	
	if(cnt == '1'){ obj1.style.display = '';}
	if(cnt == '2'){ obj2.style.display = '';}
	if(cnt == '3'){ obj3.style.display = '';}
	
	cnt++;
	return false;
}

46
51
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?