동적으로 생성한 table arccordion (+체크박스 핸들링)

테이블의 상위 row 항목을 클릭했을 때 하위 row 항목이 펼쳐졌다 접혔다 하는 기능을 구현해보았다. 더불어 체크박스도 각 항목별로 전체 체크 및 전체 체크 해제도 필요해서 추가해주었다.

 

<table>
    <tbody>
    <tr class="headRow" >
      <td><input type="checkbox" class="headCheckbox" onclick="checkHeadCheckbox(this)"></td>
      <td onclick="toggleSubRows(this)">head1</td>
    </tr>
    <tr class="subRow">
        <td></td>
        <td class="txt-left">
      <input type="checkbox" class="subCheckbox" onclick="updateCheckboxState(this)">sub1-1</td>
    </tr>
    <tr class="subRow">
        <td></td>
        <td class="txt-left">
      <input type="checkbox" class="subCheckbox" onclick="updateCheckboxState(this)">sub1-2</td>
    </tr>
    <tr class="headRow" >
      <td><input type="checkbox" class="headCheckbox" onclick="checkHeadCheckbox(this)"></td>
      <td onclick="toggleSubRows(this)">head2</td>
    </tr>
    <tr class="subRow">
        <td></td>
        <td class="txt-left">
      <input type="checkbox" class="subCheckbox" onclick="updateCheckboxState(this)">sub2-1</td>
    </tr>
    </tbody>
</table>

 

html 테이블을 작성해준다.

예시를 위해 직접 row를 명시했지만 ajax로 동적 추가를 해주는 테이블에도 적용할 수 있도록 class명을 사용하였다.

상위 row의 class명을 headRow로 주고 하위 row의 class명을 subRow로 주었다.

 

 

$(function() {
    $('.subRow').hide();
});

// 체크박스 핸들링
function checkHeadCheckbox(checkbox) {
    var isChecked = $(checkbox).is(':checked');
   var row = $(checkbox).closest('.headRow');
   var subCheckboxes = $(row).nextUntil('.headRow').find('.subCheckbox');
    subCheckboxes.prop('checked', isChecked);
}

function updateCheckboxState(checkbox) {
   var row = $(checkbox).closest('.subRow').prevUntil('headRow');
    var subCheckboxes = $(row).nextUntil('.headRow').find('.subCheckbox');
    var allSubCheckboxesChecked = subCheckboxes.length === subCheckboxes.filter(':checked').length;
    $(row).find('.headCheckbox').prop('checked', allSubCheckboxesChecked);
}

function toggleAllCheckboxes(checkbox) {
    var isChecked = $(checkbox).is(':checked');
    $('.subCheckbox').prop('checked', isChecked);
    $('.headCheckbox').prop('checked', isChecked);
}

// 하위항목 toggle
function toggleSubRows(column) {
    var row = $(column).closest('.headRow');
    $(row).nextUntil('.headRow').toggle();
}

 

그래서 다음 상위 row(.headRow)가 나오기 전까지의 항목을 toggle 하도록 nextUntil 를 이용했다.

체크박스 핸들링은 각 체크박스를 클릭할 때마다 체크된 체크박스의 length를 가져와서 해당 항목의 전체 체크박스의 개수와 같으면 전체 체크박스가 체크되도록 해주었다.