본문으로 바로가기

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

category 코딩/jQuery 2017. 7. 27. 17:54







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



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





 
    $("#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)의 값을 가져오기





 
        // 버튼 클릭시 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)의 값을 가져오기





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



먼저 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);
                
    });
 
 
cs


그리고 체크된 체크박스의 수만큼 반복문을 실행한다. 반복문 안의 코드는 두 번째 예제와 동일하다.







'코딩 > jQuery' 카테고리의 다른 글

[jQuery] 입력된 값을 JSON 형태의 데이터로 변경하기  (1) 2017.07.28
RSS구독 링크추가 트위터 이메일 구독