고정 헤더 영역
상세 컨텐츠
본문
반응형
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>
아래는 실행 화면 입니다.
| 아이디 | 책이름 | 글쓴이 |
|---|---|---|
| A1 | 홍길동전 | 허균 |
| B1 | 레미제라블 | 빅토르 위고 |
반응형
'JavaScript & HTML' 카테고리의 다른 글
| nodejs (0) | 2015.04.22 |
|---|---|
| jquery 동일한 name 전체 출력 (0) | 2015.04.03 |
| javascript prototype (0) | 2015.04.02 |
| 플로팅 이미지 (스크롤 따라다니는 이미지) (0) | 2015.03.23 |
| jquery href 함수호출 (함수 선언) (0) | 2015.03.11 |
댓글 영역