리자

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건
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,167
12-08-07 조회 3,828
12-08-03 조회 3,643
12-07-31 조회 3,748
12-07-30 조회 3,700
12-07-16 조회 3,895
12-07-15 조회 3,731
12-07-07 조회 3,593
12-07-06 조회 3,802
12-07-03 조회 3,753
12-06-29 조회 3,367
12-06-22 조회 3,738
12-06-17 조회 3,997
12-05-21 조회 3,922
12-05-02 조회 3,446
12-05-02 조회 4,241
12-05-02 조회 3,365
12-04-30 조회 3,562
12-04-30 조회 3,241
12-03-17 조회 4,104
12-03-10 조회 3,437
12-03-08 조회 3,961
12-03-03 조회 3,677
12-02-27 조회 5,091
12-02-17 조회 4,386
12-02-16 조회 4,667
12-02-03 조회 3,334
12-01-31 조회 3,243
12-01-24 조회 3,241
12-01-17 조회 3,942
12-01-05 조회 3,490
11-12-30 조회 3,221
11-12-23 조회 4,777
11-12-08 조회 3,540
11-12-07 조회 4,503
11-11-27 조회 3,927
11-11-25 조회 4,255
11-11-23 조회 3,703
11-11-22 조회 3,559
11-11-09 조회 3,268
11-10-23 조회 3,209
11-10-19 조회 3,161
11-10-08 조회 2,843
11-10-04 조회 2,843
11-10-04 조회 5,306
11-09-01 조회 4,378
11-08-13 조회 2,559
11-08-06 조회 3,238
11-07-11 조회 3,637
11-06-27 조회 2,994
11-06-21 조회 2,657
11-06-13 조회 2,470
11-06-07 조회 2,477
11-05-26 조회 2,435
11-04-20 조회 2,761
11-03-21 조회 2,863
11-03-18 조회 2,557
11-03-11 조회 2,572
11-02-07 조회 2,402
11-01-18 조회 2,724
11-01-12 조회 2,444
11-01-06 조회 2,537
10-12-10 조회 2,799
10-12-09 조회 2,651
10-12-08 조회 5,081
10-11-29 조회 2,916
10-11-28 조회 2,823
10-11-28 조회 2,656
10-11-19 조회 2,846
10-11-04 조회 2,719
10-10-21 조회 2,443
10-10-19 조회 3,409
10-10-12 조회 2,731
10-10-07 조회 2,559
10-09-30 조회 3,520
10-09-17 조회 3,932
10-09-17 조회 3,874
10-05-31 조회 3,584
09-12-31 조회 3,719
09-07-23 조회 5,043
08-09-16 조회 3,247
08-09-06 조회 2,988
08-09-04 조회 3,409
08-08-16 조회 4,439
08-08-15 조회 3,311
08-08-14 조회 4,526
08-08-12 조회 3,993
08-07-23 조회 2,811
08-07-10 조회 3,762
08-07-04 조회 2,989
08-06-27 조회 7,628
08-06-19 조회 4,938
08-05-27 조회 5,541
08-05-25 조회 5,377
08-05-23 조회 3,452
08-05-23 조회 4,618
08-05-21 조회 4,970
08-05-20 조회 4,083
08-05-20 조회 3,311
08-04-18 조회 4,379