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번 칸을 클릭했을 때다.

by 개발자 CofS 2016.06.08 13:33