2016. 6. 8. 13:33ㆍlanguage/jquery
jquery 를 이용해서 여러 태그들에게 한번에 click 이벤트를 걸어보자.
먼저 다음 그림을 보고 어떻게 하면 모든 칸에 click 이벤트를 걸 수 있을까 하는 생각을 해보자.
위 이미지는 3x3 칸을 가진 table tag 이다.
테이블의 한칸, 즉 td 태그 전체에 click 이벤트를 걸 수 있는 방법은 무엇이 있을까 ?
단순하게 onclick 함수를 각 태그마다 집어넣어 줄 수도 있고, 하나하나 onclick 이벤트를 바인딩 할 수도 있다.
정답은 없다.
정상적으로 동작하면 그게 곧 정답이다.
하지만 항상 어떻게 하면 조금 더 수준있는 코딩을 할 수 있을지 고민해 보아야 한다.
소스코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 |
<!DOCTYPE>
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
table {width:100%;}
table tr td {border:1px solid #111; width:30%; height:50px; text-align: center;}
</style>
<script>
$(function(){
$("table tr td").click(function(){
var txt = $(this).text();
alert(txt);
});
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</BODY>
</HTML>
|
cs |
4# : jquery import
5# ~ 8# : table을 보기좋게 만들기 위한 style 정의 (신경쓰지 않아도 됨)
10# : document ready
11# : 이벤트를 걸어줄 대상인 td 태그를 가져와 click 함수를 걸어준다. jquery selector 를 사용해서 이벤트를 걸어줄 대상 전체를 가져오는게 핵심이다. 응용하면 table 태그의 td 뿐만이 아니라 다른 여러 태그도 가능하다.
12# : this 객체를 이용하여 클릭된 객체(태그)를 컨트롤한다.
20# ~ 36# : table tag
핵심적인 소스는 단 1줄에 불과하다.
11# : $("table tr td").click(function(){ });
여러 방법이 있겠지만 단 1줄로도 끝날 수도 있다.
소스가 간결하고 짧은 것 만이 좋은 소스인 것은 아니나 불필요한 소스는 최소화 하는 것이 좋다고 생각한다.
위 소스를 실행하면 9칸 모두에게 click 이벤트가 걸리게 된다.
하단의 이미지는 5번 칸을 클릭했을 때다.
'language > jquery' 카테고리의 다른 글
| jquery 드래그 앤 드롭 파일 업로드 (28) | 2018.04.25 |
|---|---|
| onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바, 로딩바 생성 (0) | 2017.06.02 |
| browser.msie 정의되지 않음 또는 null 참조인 'msie' 속성을 가져올 수 없습니다. (0) | 2016.12.15 |
| jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength (0) | 2016.12.06 |
| page swiper plugin 추천 / 페이지 슬라이드 / 이미지 슬라이드 / 탭 슬라이드 / jquery mobile 호환 (0) | 2016.07.08 |
| jquery 를 이용하여 태그 좌표 구하기 (절대위치 구하기 / 태그 위치 구하기) (4) | 2016.05.19 |
| jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기 (83) | 2016.05.11 |
| jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 TOP 버튼 만들기 (26) | 2016.04.21 |
| jquery form serialize 를 이용하여 json으로 만들기 (2) | 2016.04.15 |
| jquery ajax 를 이용한 간편 파일 업로드 ( fileObject 를 바로 업로드 하는 방식 ) (4) | 2016.04.08 |