[TIP] jquery selector 를 이용해서 여러 태그들에게 한번에 click 이벤트를 걸어보자.
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번 칸을 클릭했을 때다.
