<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<script>
function show() {
$('#con').show();
$('.con').show();
}
function hide1() {
$('#con').hide();
}
function hide2() {
$('.con').hide();
}
</script>
<input type="button" value="보이기" onclick="javascript:show();">
<input type="button" value="tr감추기" onclick="javascript:hide1();">
<input type="button" value="td감추기" onclick="javascript:hide2();">
<table>
<tr id ="con">
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td class = "con">5</td><td>6</td>
</tr>
</table>
</body>
</html>
1. 보이기 누른 상태(혹은 초기상태)
2. tr 감추기 버튼을 누른 상태(위의 첫번째 줄이 사라진다.)
3. td감추기 버튼을 누른 상태(아래의 5가 사라진다.)
4. tr감추기와 td감추기를 누른 상태
hide() 함수는 선택한 엘레멘트가 show 상태일때 화면상에서 숨기는 역활을 한다.
show() 함수는 선택한 엘레멘트가 hide 상태일 경우 화면에 보여주는 역활을 한다.
'web > jQuery' 카테고리의 다른 글
| jquery 체크박스를 통한 내용 복사 (0) | 2011.02.01 |
|---|---|
| jquery masonry (0) | 2011.01.20 |
| jQuery after() prepend() (0) | 2011.01.11 |
| jQuery click() (0) | 2011.01.10 |
| jQuery val() 두번째 (0) | 2011.01.09 |
