JavaScript & HTML

jquery 부모, 자식 노드 찾기

husks 2015. 4. 3. 10:49
반응형

jquery 부모, 자식 노드 찾기 예제 입니다.

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				
				$("#getParent").click(function(){
					alert($(this).parent().attr("id"));
				});
				
				$("#getChildren").click(function(){
					alert($(this).children().attr("id"));
				});
				
				$("#getPrev").click(function(){
					alert($(this).prev().attr("id"));
				});
				
				$("#getNext").click(function(){
					alert($(this).next().attr("id"));
				});
				
				$("#getFistBookName").click(function(){
					alert($(this).prev().children().children().next().children().next().html());
				});
				
			});
		</script>
		<style type="text/css">
			tr{
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<div id="this is parent">
			<button id="getParent">부모 가져오기</button>
		</div>
		<br>
		<button id="getChildren">자식 가져오기<div id="this is children"></div></button>
		<br>
		<br>
		<div id="this is prev"></div><button id="getPrev">앞에 가져오기</button>
		<br>
		<br>
		<button id="getNext">뒤에 가져오기</button><div id="this is next"></div>
		<br>
		<br>
		
		<table border="1" width="40%">
			<tbody>
				<tr>
					<th>아이디</th><th>책이름</th><th>글쓴이</th>
				</tr>
				<tr>
					<td id="husk">A1</td><td>홍길동전</td><td>허균</td>
				</tr>
				<tr>
					<td>B1</td><td>레미제라블</td><td>빅토르 위고</td>
				</tr>
			</tbody>
		</table>
		<button id="getFistBookName">첫번째 책이름 가져오기</button>
	</body>
</html>

아래는 실행 화면 입니다.



Test







아이디책이름글쓴이
A1홍길동전허균
B1레미제라블빅토르 위고


반응형
저작자표시 비영리 변경금지 (새창열림)