리자

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>

[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]

댓글 4개

저도 공부해보고싶내요 화이팅용~
jQuery를 이용해서 가장먼저 했으면 하는게 view.skin.php의 하단에 있는...

<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
window.onload=function() {
resizeBoardImage(<?=(int)$board[bo_image_width]?>);
drawFont();
}
</script>
댓글 부분도 jQuery ajax 이용해 처리되었으면 좋겠습니다.! ㅋ

차후에는 전부 jQuery 로 ~
앞으로 대세는 jQuery 인가...
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
07-07-16 조회 3,126
07-07-06 조회 3,012
07-07-06 조회 3,442
07-06-23 조회 3,270
07-06-16 조회 2,780
07-05-20 조회 4,286
07-05-09 조회 3,465
07-05-09 조회 6,103
07-05-04 조회 2,697
07-04-30 조회 9,832
07-04-27 조회 4,337
07-04-26 조회 3,448
07-04-25 조회 5,295
07-04-18 조회 7,792
07-04-13 조회 3,130
07-04-12 조회 6,640
07-04-12 조회 5,051
07-04-12 조회 3,359
07-04-11 조회 5,724
07-04-05 조회 6,369
07-03-24 조회 4,425
07-03-20 조회 3,746
07-03-18 조회 3,992
07-03-18 조회 4,740
07-03-17 조회 4,239
07-03-16 조회 4,134
07-03-15 조회 5,296
07-03-13 조회 5,404
07-03-13 조회 3,589
07-03-08 조회 4,501
07-03-08 조회 3,987
07-03-08 조회 3,298
07-03-08 조회 4,189
07-03-05 조회 4,444
07-03-04 조회 2,917
07-03-01 조회 5,949
07-02-28 조회 3,234
07-02-27 조회 4,410
07-02-26 조회 3,333
07-02-26 조회 3,041
07-02-23 조회 3,671
07-02-23 조회 3,643
07-02-22 조회 4,021
07-02-22 조회 3,834
07-02-19 조회 3,856
07-02-17 조회 4,876
07-02-14 조회 8,178
07-02-12 조회 3,948
07-02-10 조회 3,569
07-02-02 조회 3,816
07-01-31 조회 3,488
07-01-29 조회 3,346
07-01-25 조회 5,124
07-01-21 조회 3,271
07-01-19 조회 3,055
06-12-15 조회 4,068
06-12-15 조회 4,472
06-12-15 조회 2,961
06-12-15 조회 4,512
06-12-15 조회 3,400
06-12-15 조회 4,102
06-12-15 조회 3,047
06-12-15 조회 2,777
06-12-15 조회 4,638
06-12-15 조회 3,182
06-12-15 조회 3,286
06-12-07 조회 4,735
06-12-07 조회 4,020
06-12-04 조회 4,666
06-11-27 조회 3,712
06-11-21 조회 4,022
06-11-15 조회 3,453
06-11-04 조회 3,344
06-10-29 조회 3,999
06-10-13 조회 3,867
06-10-13 조회 4,225
06-10-13 조회 4,181
06-10-12 조회 5,372
06-10-12 조회 4,288
06-10-04 조회 3,790
06-10-02 조회 4,568
06-09-29 조회 3,056
06-09-26 조회 3,396
06-09-26 조회 3,658
06-09-26 조회 3,300
06-09-26 조회 3,451
06-09-26 조회 4,357
06-09-25 조회 4,662
06-09-22 조회 5,000
06-09-22 조회 3,564
06-09-21 조회 4,340
06-09-21 조회 4,343
06-09-21 조회 3,551
06-09-21 조회 5,201
06-09-21 조회 3,729
06-09-21 조회 3,459
06-09-20 조회 3,039
06-09-15 조회 3,167
06-09-13 조회 3,479
06-09-11 조회 3,285