[jQuery] Table Row 동적으로 추가하기

2013-10-06 by 편리

또 제목만 거창하게 쓰고.. 내용은 그다지 거창하지 않는 jQuery 소스 코드이다. 주어진 테이블에 동적으로 TR을 추가하는 것인데.. 추가와 함께 삭제하는 기능도 포함되어 있다.

<table >
<tbody>
<tr>
    <th>옵션명</th>
    <th colspan="2">옵션항목(,로 구분)</th>
</tr>
<tr>
    <td><input type="text" name="spl_subject[]" value="" class="frm_input" size="15"></td>
    <td><input type="text" name="spl[]" value="" class="frm_input" size="50"></td>
    <td><button type="button" id="supply_table_create">옵션목록생성</button></td>
</tr>
<tr>
    <td colspan="3"><button type="button" id="add_supply_row">입력필드추가</button></td>
</tr>
</tbody>
</table>

위와 같은 html 코드가 있을 때 입력필드추가 라는 버튼 위로 옵션명과 항목을 입력하는 수 있는 필드를 추가하는 것이다. 아래는 jQuery 스크립트 코드이다.

$(function() {
    // 입력필드추가
    $("#add_supply_row").click(function() {
        var $el = $(this).closest("tr");
        var fld = "<tr><td><input type="text" name="spl_subject[]" value="" class="frm_input" size="15"></td>";
        fld += "<td><input type="text" name="spl[]" value="" class="frm_input" size="50">";
        fld += "<button type="button" id="del_supply_row">삭제</button></td></tr>";

        $el.before(fld);

        var rowspan = $("input[name='spl[]']").size();
        $("#supply_table_create").parent().attr("rowspan", rowspan);
    });

    // 입력필드삭제
    $("#del_supply_row").live("click", function() {
        $(this).closest("tr").remove();
        var rowspan = $("input[name='spl[]']").size();
        $("#supply_table_create").parent().attr("rowspan", rowspan);
    });
});
</script>

스크립트에서 주의깊게 봐야할 부분은 TR이 추가되면서 rowspan 값이 변경이 되는데 이 부분을 수정해주는 것이다. 그외에는 지극히 일반적인 jQuery 코드라고 생각은 되는데.. 나만 그런가?

덧, html 코드는 퍼블리셔의 손을 거치지 않아 대략적인 코드이다. jQuery 코드 짜는 것보다 html 코드 짜는 게 더 어려운 것 같다.

Leave a Reply Cancel reply