jQuery 동적테이블

불당님이 jQuery 하시길래 몇일 살펴보았는데 상당히 만족스럽네요.

처음 만들어보는거라 코드가 지저분합니다.

jQuery 잘 아시는 분들은 수정 후 좀 알려주십시오.



        <input type=button value='행추가' id='add-row'>
        <input type=button value='열추가' id='add-col'>
        <input type=button value='행삭제' id='del-row'>
        <input type=button value='열삭제' id='del-col'>
        <table id='stock_table' border=0>
            <thead id='stock_thead'>
                <tr>
                    <td>
                        <input type=text name=it_opty_subj size=4 class=ed value='<?=$it[it_opty_subj]?>'>
                        <input type=text name=it_optx_subj size=4 class=ed value='<?=$it[it_optx_subj]?>'>
                    </td>
                    <td>
                        <input type=text name='optx_subj[0]' size=5 class=ed>
                    </td>
                </tr>
            </thead>
            <tbody id='stock_tbody'>
                <tr>
                    <td><input type=text name='opty_subj[0]' size=10 class=ed></td>
                    <td><input type=text name='opt[0][0]' size=5 class=ed></td>
                </tr>
            </tbody>
        </table>


... 중략 ...


<script>
var stock_x = 0;
var stock_y = 0;

$(document).ready(function() {
    // 행추가
    $('#add-row').click(function() {
        stock_y++;

        var s = "<tr>";
        s += "<td><input type=text name='opty_subj["+stock_y+"]' size=10 class=ed></td>"; // 행 제목 추가
        var len = $('#stock_thead td').length; // 열의 갯수에 따라 추가된 행의 열 추가
        for (i=0; i<len-1; i++) {
            s += "<td><input type=text name='opt["+stock_y+"]["+i+"]' size=5 class=ed></td>";
        }
        s += "</tr>";
        $('#stock_tbody').append(s);
    });

    // 열추가
    $('#add-col').click(function() {
        stock_x++;
        $('#stock_thead tr').append("<td><input type=text name='optx_subj["+stock_x+"]' size=5 class=ed></td>");
        $('#stock_tbody tr').each(function(index) {
            $(this).append("<td><input type=text name='opt["+index+"]["+stock_x+"]' size=5 class=ed></td>");
        });
    });

    // 행삭제
    $('#del-row').click(function() {
        if (stock_y > 0) {
            $('#stock_tbody tr:last').remove();
            stock_y--;
        }

    });

    // 열삭제
    $('#del-col').click(function() {
        if (stock_x > 0) {
            $('#stock_thead td:last').remove();
            $('#stock_tbody tr').each(function(index) {
                $('td:last', this).remove();
            });
            stock_x--;
        }
    });
});
</script>