[jQuery] 테이블의 특정 행(row)의 값 가져오기

제이쿼리와 부트스트랩을 이용하여 테이블의 특정 행을 클릭 시 값을 가져오는 예제

1. 테이블 행(Row) 클릭 시 해당 행의 값을 가져오기

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!-- jQuery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- bootstrap JS -->
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    
    <!-- bootstrap CSS -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    
 
 
</head>
 
<body>
 
    
    <br><br>
 
    <div class="row">
        <table id="example-table-1" width="100%" class="table table-bordered table-hover text-center">
            <thead>
                <tr>
                    <th>No. </th>
                    <th>아이디</th>
                    <th>이름</th>
                    <th>이메일</th>
                </tr>
            </thead>
            <tbody>                
                <tr>
                    <td>1</td>
                    <td>user01</td>
                    <td>홍길동</td>
                    <td>hong@gmail.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>user02</td>
                    <td>김사부</td>
                    <td>kim@naver.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>user03</td>
                    <td>존</td>
                    <td>John@gmail.com</td>
                </tr>
            </tbody>
        </table>
        <div class="col-lg-12" id="ex1_Result1" ></div> 
        <div class="col-lg-12" id="ex1_Result2" ></div> 
    </div>
    <br><br>
    
    <script>
    
        // 테이블의 Row 클릭시 값 가져오기
        $("#example-table-1 tr").click(function(){     
 
            var str = ""
            var tdArr = new Array();    // 배열 선언
            
            // 현재 클릭된 Row(<tr>)
            var tr = $(this);
            var td = tr.children();
            
            // tr.text()는 클릭된 Row 즉 tr에 있는 모든 값을 가져온다.
            console.log("클릭한 Row의 모든 데이터 : "+tr.text());
            
            // 반복문을 이용해서 배열에 값을 담아 사용할 수 도 있다.
            td.each(function(i){
                tdArr.push(td.eq(i).text());
            });
            
            console.log("배열에 담긴 값 : "+tdArr);
            
            // td.eq(index)를 통해 값을 가져올 수도 있다.
            var no = td.eq(0).text();
            var userid = td.eq(1).text();
            var name = td.eq(2).text();
            var email = td.eq(3).text();
            
            
            str +=    " * 클릭된 Row의 td값 = No. : <font color='red'>" + no + "</font>" +
                    ", 아이디 : <font color='red'>" + userid + "</font>" +
                    ", 이름 : <font color='red'>" + name + "</font>" +
                    ", 이메일 : <font color='red'>" + email + "</font>";        
            
            $("#ex1_Result1").html(" * 클릭한 Row의 모든 데이터 = " + tr.text());        
            $("#ex1_Result2").html(str);
        });
    
    
    </script>
 
 
</body>
</html>
 
 r

 
    $("#example-table-1 tr").click(function(){     
 
        var str = ""
        var tdArr = new Array();    // 배열 선언
            
        // 현재 클릭된 Row(<tr>)
        var tr = $(this);
        var td = tr.children();
 

코드의 맨 첫 부분을 보자. 문자열을 저장할 str과 데이터를 담을 배열을 선언하였다. 그리고 현재 클릭 된 행을 tr 이라는 변수에 담았다. children( )는 자식 노드를 찾는 것인데, tr 의 자식 노드는 td 이다.

    
    // tr.text()는 클릭된 Row 즉 tr에 있는 모든 값을 가져온다.
    console.log("클릭한 Row의 모든 데이터 : "+tr.text());
            
    // 반복문을 이용해서 배열에 값을 담아 사용할 수 도 있다.
    td.each(function(i){
        tdArr.push(td.eq(i).text());
    });
            
    console.log("배열에 담긴 값 : "+tdArr);

클릭된 행의 모든 값을 한 번에 가져오려면 tr.text( )를 이용하면 된다. 그러면 tr 에 있는 값들을 문자열로 가져오게 된다. html로 가져올 필요가 있다면 tr.html( )을 사용하면 된다.

다음을 보면 td의 개수만큼 반복문을 돌려 배열에 그 값을 담았다. 만약 JSON으로 데이터를 변환해야 한다면 이렇게 배열에 담은 후 JSON.stringify(배열변수) 를 사용하여 변환하면 된다.

eq( )는 인덱스로 해당 요소를 찾는 것인데, 테이블은 각 행당 4개의 열(td)가 있다. 각각의 열은 0부터 시작하는 인덱스를 이용해 찾을 수 있는데, td.eq(0) 이면 첫 번째 열을 찾는다는 것이다.

위의 테이블을 예로 들면 No. 열의 가리킨다.

   
    // td.eq(index)를 통해 값을 가져올 수도 있다.
    var no = td.eq(0).text();
    var userid = td.eq(1).text();
    var name = td.eq(2).text();
    var email = td.eq(3).text();

배열을 이용하지 않고 각각의 값을 찾으려면 eq( )를 이용하면 된다.

2. 버튼 클릭 시 해당 행(Row)의 값을 가져오기

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!-- jQuery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- bootstrap JS -->
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    
    <!-- bootstrap CSS -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    
 
 
</head>
 
<body>
 
    
    <br><br>
 
    <div class="row">
        <table id="example-table-2" width="100%" class="table table-bordered table-hover text-center">
            <thead>
                <tr>
                    <th>No. </th>
                    <th>아이디</th>
                    <th>이름</th>
                    <th>이메일</th>
                    <th>버튼</th>
                </tr>
            </thead>
            <tbody>                
                <tr>
                    <td>1</td>
                    <td>user04</td>
                    <td>맥크리</td>
                    <td>sunset@gmail.com</td>
                    <td><input type="button" class="checkBtn" value="클릭" /></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>user05</td>
                    <td>메르시</td>
                    <td>Mercy@naver.com</td>
                    <td><input type="button" class="checkBtn" value="클릭" /></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>user06</td>
                    <td>한조</td>
                    <td>trolling@gmail.com</td>
                    <td><input type="button" class="checkBtn" value="클릭" /></td>
                </tr>
            </tbody>
        </table>
        <div class="col-lg-12" id="ex2_Result1" ></div> 
        <div class="col-lg-12" id="ex2_Result2" ></div> 
    </div>
 
 
        <br><br>
 
 
    <script>
 
        // 버튼 클릭시 Row 값 가져오기
        $(".checkBtn").click(function(){ 
            
            var str = ""
            var tdArr = new Array();    // 배열 선언
            var checkBtn = $(this);
            
            // checkBtn.parent() : checkBtn의 부모는 <td>이다.
            // checkBtn.parent().parent() : <td>의 부모이므로 <tr>이다.
            var tr = checkBtn.parent().parent();
            var td = tr.children();
            
            console.log("클릭한 Row의 모든 데이터 : "+tr.text());
            
            var no = td.eq(0).text();
            var userid = td.eq(1).text();
            var name = td.eq(2).text();
            var email = td.eq(3).text();
            
            
            // 반복문을 이용해서 배열에 값을 담아 사용할 수 도 있다.
            td.each(function(i){    
                tdArr.push(td.eq(i).text());
            });
            
            console.log("배열에 담긴 값 : "+tdArr);
            
 
            str +=    " * 클릭된 Row의 td값 = No. : <font color='red'>" + no + "</font>" +
                    ", 아이디 : <font color='red'>" + userid + "</font>" +
                    ", 이름 : <font color='red'>" + name + "</font>" +
                    ", 이메일 : <font color='red'>" + email + "</font>";        
            
            $("#ex2_Result1").html(" * 클릭한 Row의 모든 데이터 = " + tr.text());        
            $("#ex2_Result2").html(str);    
        });
    
 
    </script>
 
 
</body>
</html>
 
 

 
        // 버튼 클릭시 Row 값 가져오기
        $(".checkBtn").click(function(){ 
            
            var str = ""
            var tdArr = new Array();    // 배열 선언
            var checkBtn = $(this);
 

버튼을 클릭하면 이벤트가 발생하고 Script가 실행된다. 먼저 문자열을 담을 변수 str과 배열을 선언한다. 다음으로 클릭 된 버튼을 checkBtn이란 변수에 담는다.

    
    // checkBtn.parent() : checkBtn의 부모는 <td>이다.
    // checkBtn.parent().parent() : <td>의 부모이므로 <tr>이다.
    var tr = checkBtn.parent().parent();
    var td = tr.children();
    

다음 코드를 보자. 여기서는 parent( )를 이용해 버튼 checkBtn의 부모를 찾는다. checkBtn은 <td> 안에 있으므로 checkBtn의 부모는 td가 된다. 여기서 다시 한번 부모를 찾게 되면 tr이 되고 이것은 현재 버튼이 클릭된 행이 된다.

클릭된 tr을 찾았으면 아래에 있는 children( )을 이용해 td를 찾는다.

    
    console.log("클릭한 Row의 모든 데이터 : "+tr.text());
            
    var no = td.eq(0).text();
    var userid = td.eq(1).text();
    var name = td.eq(2).text();
    var email = td.eq(3).text();
 

위의 코드는 첫 번째 예제와 동일하다. tr.text( )을 이용하면 해당 행의 모든 값을 가져올 수 있다. td 값을 각각 가져오려면 td.eq(인덱스) 를 이용하면 된다.

2. 체크박스에 체크된 모든 행(Row)의 값을 가져오기

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!-- jQuery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- bootstrap JS -->
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    
    <!-- bootstrap CSS -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    
 
 
</head>
 
<body>
    
    <br><br>
 
    <div class="row">
    
        <button type="button" class="btn btn-outline btn-primary pull-right" id="selectBtn">선택</button>
        <table id="example-table-3" width="100%" class="table table-bordered table-hover text-center">
            <thead>
                <tr>
                    <th>선택</th>
                    <th>No. </th>
                    <th>아이디</th>
                    <th>이름</th>
                    <th>이메일</th>
                </tr>
            </thead>
            <tbody>                
                <tr>
                    <td><input type="checkbox" name="user_CheckBox" ></td>
                    <td>1</td>
                    <td>user07</td>
                    <td>NC소프트</td>
                    <td>nc@gmail.com</td>
                
                </tr>
                <tr>
                    <td><input type="checkbox" name="user_CheckBox" ></td>
                    <td>2</td>
                    <td>user08</td>
                    <td>넥슨</td>
                    <td>donson@naver.com</td>
                    
                </tr>
                <tr>
                    <td><input type="checkbox" name="user_CheckBox" ></td>
                    <td>3</td>
                    <td>user09</td>
                    <td>넷마블</td>
                    <td>net@gmail.com</td>
                </tr>
            </tbody>
        </table>
        <div class="col-lg-12" id="ex3_Result1" ></div> 
        <div class="col-lg-12" id="ex3_Result2" ></div> 
    </div>
    
    <br><br>
 
    <script>
    
    
        // 상단 선택버튼 클릭시 체크된 Row의 값을 가져온다.
        $("#selectBtn").click(function(){ 
            
            var rowData = new Array();
            var tdArr = new Array();
 
            var checkbox = $("input[name=user_CheckBox]:checked");
            
            // 체크된 체크박스 값을 가져온다
            checkbox.each(function(i) {
    
                // checkbox.parent() : checkbox의 부모는 <td>이다.
                // checkbox.parent().parent() : <td>의 부모이므로 <tr>이다.
                var tr = checkbox.parent().parent().eq(i);
                var td = tr.children();
                
                // 체크된 row의 모든 값을 배열에 담는다.
                rowData.push(tr.text());
                
                // td.eq(0)은 체크박스 이므로  td.eq(1)의 값부터 가져온다.
                var no = td.eq(1).text()+", "
                var userid = td.eq(2).text()+", ";
                var name = td.eq(3).text()+", ";
                var email = td.eq(4).text()+", ";
                
                // 가져온 값을 배열에 담는다.
                tdArr.push(no);
                tdArr.push(userid);
                tdArr.push(name);
                tdArr.push(email);
                
                //console.log("no : " + no);
                //console.log("userid : " + userid);
                //console.log("name : " + name);
                //console.log("email : " + email);
            });
            
            $("#ex3_Result1").html(" * 체크된 Row의 모든 데이터 = "+rowData);    
            $("#ex3_Result2").html(tdArr);    
        });
    
    </script>
 
 
</body>
</html>
 
 
Colored by Color Scripter
cs

    
    // 상단 선택버튼 클릭시 체크된 Row의 값을 가져온다.
    $("#selectBtn").click(function(){ 
            
        var rowData = new Array(); 
        var tdArr = new Array();
        var checkbox = $("input[name=user_CheckBox]:checked");
 
 
i

먼저 2개의 배열을 선언하였다. rowData는 행의 값을 모두 담을 배열이고, tdArr은 각각 td의 값을 담을 배열이다. 다음으로 체크된 체크박스를 가져와 checkbox라는 변수에 담는다.

    
    // 체크된 체크박스 값을 가져온다
    checkbox.each(function(i) {
    
        // checkbox.parent() : checkbox의 부모는 <td>이다.
        // checkbox.parent().parent() : <td>의 부모이므로 <tr>이다.
        var tr = checkbox.parent().parent().eq(i);
        var td = tr.children();
                
        // 체크된 row의 모든 값을 배열에 담는다.
        rowData.push(tr.text());
                
        // td.eq(0)은 체크박스 이므로  td.eq(1)의 값부터 가져온다.
        var no = td.eq(1).text()+", "
        var userid = td.eq(2).text()+", ";
        var name = td.eq(3).text()+", ";
        var email = td.eq(4).text()+", ";
                
        // 가져온 값을 배열에 담는다.
        tdArr.push(no);
        tdArr.push(userid);
        tdArr.push(name);
        tdArr.push(email);
                
    });
 
 
Colored by Color Scripter
cs