리자

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,487
11-10-18 조회 4,016
11-10-18 조회 2,392
11-10-15 조회 3,614
11-10-10 조회 2,667
11-10-02 조회 2,584
11-09-28 조회 2,397
11-09-24 조회 2,484
11-09-22 조회 2,384
11-09-05 조회 2,870
11-08-31 조회 2,245
11-08-31 조회 2,556
11-08-31 조회 2,410
11-08-29 조회 2,959
11-08-28 조회 2,455
11-08-25 조회 2,505
11-08-17 조회 2,218
11-08-16 조회 2,455
11-08-11 조회 2,908
11-08-07 조회 2,621
11-08-03 조회 2,330
11-07-22 조회 2,080
11-07-12 조회 3,300
11-06-27 조회 2,079
11-06-01 조회 1,746
11-05-17 조회 2,534
11-05-01 조회 2,604
11-04-28 조회 2,891
11-04-28 조회 2,939
11-04-13 조회 2,599
11-03-27 조회 2,719
11-03-27 조회 2,599
11-03-14 조회 2,012
11-03-02 조회 2,336
11-03-02 조회 2,567
11-02-27 조회 2,997
11-02-23 조회 2,377
11-02-19 조회 2,518
11-02-14 조회 4,132
11-02-03 조회 2,924
11-01-24 조회 3,866
11-01-04 조회 2,398
10-12-08 조회 5,404
10-11-15 조회 2,415
10-11-14 조회 2,587
10-11-14 조회 3,611
10-10-29 조회 3,682
10-10-19 조회 2,695
10-10-07 조회 2,523
10-10-05 조회 4,439
10-09-18 조회 2,739
10-09-18 조회 2,478
10-09-17 조회 4,881
10-09-15 조회 2,823
10-09-15 조회 2,348
10-09-15 조회 2,837
10-09-15 조회 2,671
10-09-11 조회 3,994
10-09-11 조회 2,503
10-09-11 조회 2,541
10-09-07 조회 3,815
10-09-07 조회 3,351
10-08-29 조회 2,809
10-07-01 조회 3,060
10-06-30 조회 2,464
10-06-30 조회 2,648
10-06-30 조회 3,000
10-06-13 조회 2,033
10-04-15 조회 3,203
10-04-04 조회 3,434
10-02-23 조회 3,531
10-02-09 조회 3,136
10-01-25 조회 2,643
10-01-25 조회 2,739
09-12-27 조회 4,389
09-11-23 조회 3,611
09-11-20 조회 4,844
09-08-30 조회 3,046
09-08-30 조회 3,041
09-08-12 조회 3,008
09-07-22 조회 4,068
09-07-22 조회 4,718
09-07-15 조회 5,886
09-07-11 조회 2,961
09-06-17 조회 2,703
09-06-15 조회 2,991
09-05-29 조회 3,269
09-05-11 조회 5,907
09-05-08 조회 2,660
09-04-30 조회 3,780
09-04-17 조회 3,095
09-04-04 조회 3,274
09-03-05 조회 3,663
09-02-09 조회 3,631
09-02-03 조회 6,140
08-12-27 조회 3,201
08-12-20 조회 4,292
08-11-21 조회 5,253
08-11-14 조회 2,820
08-11-03 조회 3,283