웹프로그래밍

Global It Leader!!


jQuery


 
 

테이블 행/열 추가하는 자바스크립트

페이지 정보

작성자 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 4,515회 작성일 12-02-27 01:38

본문

<html>
<head>
    <title>테이블에 동적으로 열추가/열삭제</title>
    <style>
        table td input, td select {
            border: 1px solid #CFD3DB;
            font-family: dotum,"돋움";
            font-size: 12px;
            width: 100%;
        }
        table {
            border-collapse: collapse;
            empty-cells: show;
            border-top: 2px solid #4BA3E7;
            width: 100%;
        }
        table td {
            border-bottom: 1px solid #E5E5E5;
            color: #747D90;
            padding: 6px 0 5px 10px;
            text-align: left;
            vertical-align: middle;
        }
        table td.header {
            background: none repeat scroll 0 0 #EEF3FA;
            border-bottom: 1px solid #E5E5E5;
            color: #414552;
            font-weight: bold;
            padding: 6px 0 5px 10px;
            text-align: left;
            vertical-align: middle;
        }
        a.btn {
            border: 1px solid #CCCCCC;
            border-radius: 3px 3px 3px 3px;
            color: #7F8693;
            display: inline-block;
            font-family: Dotum;
            font-size: 11px;
            height: 14px;
            padding: 2px 7px;
            text-decoration: none;
            vertical-align: middle;
        }
        a.btn:hover {
            text-decoration: none;
        }
    </style>
    <script>
        var TableLibrary = {
            tableRowLimit : 10,     // 행추가 제한
            tableRowNum : 1,        // 행을 추가할 기준
            tableRowIndex : 0,   // 행을 구분하기 위해
            addRow : function(){
                if(TableLibrary.tableRowIndex < TableLibrary.tableRowLimit-1){
                    var mytable = document.getElementById("mytable");           // 사용하는 프레임웍에 따라 변경가능
                    var newRow = mytable.insertRow(TableLibrary.tableRowNum);
                    TableLibrary.tableRowNum++;
                    TableLibrary.tableRowIndex++;
                    newRow.id = "myTableTr_" + TableLibrary.tableRowIndex;
                    
                    var snsCell1 = newRow.insertCell(0);
                    snsCell1.innerHTML = "<a href='#' onclick='TableLibrary.delRow(\"myTableTr_" + TableLibrary.tableRowIndex + "\"); return false;' class='btn'>-</a>";
                    
                    var snsCell2 = newRow.insertCell(0);
                    snsCell2.innerHTML = "<input type='text' id='myData_" + TableLibrary.tableRowIndex + "' name='myData'>";    // 데이터이름
                    
                    var snsCell3 = newRow.insertCell(0)
                    snsCell3.className  = "header";
                    snsCell3.innerHTML = "제목";
                } else {
                    alert("최대 "+TableLibrary.tableRowLimit+"개까지 입력할 수 있습니다.");
                    return;
                }
                
           },
           delRow : function(obj){
                TableLibrary.tableRowNum--;
                TableLibrary.tableRowIndex--;
                if(obj!="" && obj!=null){
                    document.getElementById(obj).parentNode.removeChild(document.getElementById(obj));
                }
           }
        }
    </script>
</head>
<body>
    <table cellpadding="0" border="0" id="mytable">
        <colgroup>
            <col width="80px">
            <col width="">
            <col width="20px">
        </colgroup>
        <tr>
            <td class="header">제목</td>
            <td><input type="text" name="myData" id="myData_0"></td>
            <td><a class="btn" onclick="TableLibrary.addRow(); return false;" href="#">+</a></td>
        </tr>
    </table>
</body>
</html>

댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
42 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4477 03-21
41 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4416 03-21
40 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5197 03-15
39 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4580 03-15
38 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5237 03-09
37 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4621 03-08
36 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4310 03-08
35 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4641 03-01
34 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4475 03-01
33 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4980 02-29
32 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4835 02-29
31 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4418 02-29
30 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4880 02-28
열람중 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4516 02-27
28 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4781 02-22
27 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4271 02-26
26 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4363 02-14
25 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4320 02-10
24 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4814 11-23
23 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5412 08-27