[HTML, jQuery] Table 내의 checkbox가 checked 된 row 데이터 받기

Table에서 checkbox column이 들어갔을 때 checkbox에서 체크된 row의 데이터를 가져오는 과정에서 애를 먹어서 정리를 해보았다.

 

 

html

<table>
    <tbody>
        <tr>
            <th><input type="checkbox" id="checkAll"></th>  <!--테이블의 최상단 column의 check박스는 전체 체크박스에 체크/해제 역할 - 자바 스크립트-->
                <th>col1</th>
                <th>col2</th>
            <th>col3</th>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkboxName"></td>
            <td>col1 text</td>
            <td>col2 text</td>
            <td>col3 text</td>
        </tr>
    </tbody>
</table>

 

 

 

JavaScript

var checkbox = $("input[name=checkboxName]:checked");
 
var col1 = "";
var col2 = "";
var col3 = "";
var col4 = "";
 
checkbox.each(function (i) {
    var tr = checkbox.parent().parent().eq(i);  // checkbox 태그의 두 단계 상위 태그가 tr이기 때문에
    var td = tr.children();  // td 태그는 tr 태그의 하위에 있으므로
 
    col1 = td.eq(1).text(); // 1번째 column(eq(0))은 체크박스 이므로 eq(1)부터 데이터를 받아줌
    col2 = td.eq(2).text();
    col3 = td.eq(3).text();
    col4 = td.eq(4).text();
});