리자

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건
+
제목 글쓴이 날짜 조회
11-10-25 조회 2,461
11-10-18 조회 3,988
11-10-18 조회 2,358
11-10-15 조회 3,568
11-10-10 조회 2,635
11-10-02 조회 2,556
11-09-28 조회 2,374
11-09-24 조회 2,455
11-09-22 조회 2,362
11-09-05 조회 2,844
11-08-31 조회 2,213
11-08-31 조회 2,516
11-08-31 조회 2,374
11-08-29 조회 2,939
11-08-28 조회 2,418
11-08-25 조회 2,478
11-08-17 조회 2,203
11-08-16 조회 2,418
11-08-11 조회 2,889
11-08-07 조회 2,587
11-08-03 조회 2,308
11-07-22 조회 2,055
11-07-12 조회 3,271
11-06-27 조회 2,064
11-06-01 조회 1,733
11-05-17 조회 2,511
11-05-01 조회 2,584
11-04-28 조회 2,871
11-04-28 조회 2,914
11-04-13 조회 2,573
11-03-27 조회 2,702
11-03-27 조회 2,578
11-03-14 조회 1,995
11-03-02 조회 2,311
11-03-02 조회 2,549
11-02-27 조회 2,980
11-02-23 조회 2,356
11-02-19 조회 2,498
11-02-14 조회 4,119
11-02-03 조회 2,910
11-01-24 조회 3,853
11-01-04 조회 2,380
10-12-08 조회 5,385
10-11-15 조회 2,380
10-11-14 조회 2,563
10-11-14 조회 3,585
10-10-29 조회 3,665
10-10-19 조회 2,675
10-10-07 조회 2,507
10-10-05 조회 4,411
10-09-18 조회 2,715
10-09-18 조회 2,467
10-09-17 조회 4,853
10-09-15 조회 2,800
10-09-15 조회 2,327
10-09-15 조회 2,798
10-09-15 조회 2,642
10-09-11 조회 3,961
10-09-11 조회 2,477
10-09-11 조회 2,512
10-09-07 조회 3,788
10-09-07 조회 3,326
10-08-29 조회 2,780
10-07-01 조회 3,040
10-06-30 조회 2,439
10-06-30 조회 2,626
10-06-30 조회 2,977
10-06-13 조회 2,003
10-04-15 조회 3,174
10-04-04 조회 3,405
10-02-23 조회 3,498
10-02-09 조회 3,117
10-01-25 조회 2,616
10-01-25 조회 2,717
09-12-27 조회 4,366
09-11-23 조회 3,583
09-11-20 조회 4,823
09-08-30 조회 3,019
09-08-30 조회 3,018
09-08-12 조회 2,967
09-07-22 조회 4,041
09-07-22 조회 4,687
09-07-15 조회 5,865
09-07-11 조회 2,940
09-06-17 조회 2,684
09-06-15 조회 2,969
09-05-29 조회 3,238
09-05-11 조회 5,880
09-05-08 조회 2,629
09-04-30 조회 3,755
09-04-17 조회 3,066
09-04-04 조회 3,250
09-03-05 조회 3,635
09-02-09 조회 3,610
09-02-03 조회 6,107
08-12-27 조회 3,179
08-12-20 조회 4,273
08-11-21 조회 5,232
08-11-14 조회 2,805
08-11-03 조회 3,254