#HTML #JQuery 태그 삭제, 숨기기, 보이기 part2. 숨기기, 보이기

 

이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정

https://hacs2772.tistory.com/11

이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정

 

이클립스 초기설정 part.3 가독성 높이기(글자색 변경)

https://hacs2772.tistory.com/27

이클립스 초기설정 part.3 가독성 높이기(글자색 변경)

 

 

지난 파트에선 삭제를 해보았다. 그러면 숨기기와 보이기는 언제 쓰일까???

 

숨기기와 보이기는 말그대로 숨기고 보여주는 것이다.

 

따라서 눈에만 안보이는 것이지 데이터는 남아있다는 것이다.

 

고로 디자인적으로 고려하지않는다면 굳이 사용할 필요는 없다.(프론트에선 디자인이 제일 중요하지만...)

 

숨기기의 예시

 

 

먼저 html

<div style="display: none;" id="vList">
	<table id="testgrid">
		<thead>
			<tr>
				<th id = "aaa" data-key="label">조건</th>
				<th id = "bbb" data-key="color">색상</th>
				<th id = "ccc" data-key="value">데이터 수</th>						
			</tr>
		</thead>
	</table>
	<table id="testgrid_template" >
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

 

 

 

그리고 JQuery 부분이다.

$("button").bind( "click", function(event) {
var targetID = $(this).attr('id');
document.getElementById("vList").style.display="none";

if(targetID == "chartTest1"){
	chartMaking(1);
	} else if(targetID == "chartTest5") {
		document.getElementById("vList").style.display="block";
		hacsChart(5);
	} 
});

 

 

먼저 이 화면을 실행하면 html에서 보면 알 수있겠지만 style을 none으로 설정해 두었다.

말그대로 시작부터 숨기고 시작한다는 것이다.

하지만 특정 버튼을 누르게 된다면 block명령으로 표시하게 된다.

고로

 

document.getElementById("태그 id명").style.display="none";

 이면 숨기는것이고

 

 

document.getElementById("태그 id명").style.display="block";

 

이면 나타나게 보이는 것이다.

 

그리고 주의할점은 저 태그 id명에 보통 jquery에서 아이디를 태그하려면 $("#태그 id명") 이렇게 쓰는데 여기서는 #을 사용하지 않는다는점이다.(내가 실수했으니 기록해 놓는다...)

 

 

 

 

Q???? 아니 근데 왜 HTML에서 disply none을 해놨는데 jquery에서도 또 none을 썻는가????

 

A???? 사실 지워서 그렇지 위에 적어놓은 버튼이벤트 말고도 다른버튼이 많다. 그래서 버튼을 클릭할때마다 none를 설정해 주지 않으면 귀찮게 조건마다 none을 계속 설정해 줘야한다.

 

 

혹시만약 저 버튼이벤트를 들어갈때마다 html에만 none을 설정해 두었다면

예시 : 처음 화면 입장시 gird1 none (html에서 none을 설정해 둿기때문) -> 버튼 클릭으로 gird1 block -> 다른버튼 클릭 시 grid1 block 계속 유지

 

 

html과 button에 둘다 none설정해 뒀을 시

예시 : 처음 화면 입장시 gird1 none (html에서 none을 설정해 둿기때문) -> 버튼 클릭으로 gird1 block -> 다른버튼 클릭 시 grid1 none