추가 버튼 클릭 시 행 추가를 하고 싶습니다.

추가 버튼 클릭 시 행 추가를 하고 싶습니다.

QA

추가 버튼 클릭 시 행 추가를 하고 싶습니다.

본문

게시판 write.skin.php 에 추가 버튼을 클릭하면 행추가(tr) 가 되게하고 싶습니다.


구글링과 phpschool 에 있는 소스를 응용해서 하고 있으나, 번번히 막히네요.


update 하는건 직접 할 수 있습니다.


그저 script 또는 jquery 로 추가 버튼 클릭 시 행이 추가되는 스킨이 있는지 알고 싶습니다.


<tr>

<td>

<select name="asd[]">

<option></option>

</select>

</td> 

<td><input type="text" name="asd[]"></td>

</tr>


위 tr 을  추가 버튼만 클릭하면 저것과 똑같은 <tr> 을 하단에 자동으로 복사및 삭제를 하고 싶습니다.


저 행 추가가 들어가있는 스킨을 아시는분 있으시면 답변 좀 부탁드리겠습니다.


감사합니다.

이 질문에 댓글 쓰기 :

답변 2

value 를 넣어주기 때문에 복사가 되는 것입니다.


tmpl 안의 내용물은 그냥 템플릿이라고 생각하시면 됩니다.


어느 특정 값이 적용된 형태가 아닌 비어있는 틀로 만드셔야 합니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <style type="text/css">
        #tmpl { display: none; }
        table.dest { min-width: 20.0em; border-collapse: collapse; border-spacing: 0; }
        table.dest td { border: 1px solid gray; }
        </style>

        <script type="text/javascript">
        function row_add(table) {
            var tmpl = document.getElementById("tmpl");
            var tr = (tmpl.getElementsByTagName("table")[0].rows[0]).cloneNode(true);
            table.getElementsByTagName("tbody")[0].appendChild(tr);
        }
        function row_del(obj) {
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
        </script>
    </head>
    <body>
        <div id="tmpl">
            <table>
                <tbody>
                <tr>
                <td><select name="asd[]"><option value="test">test</option></select></td>
                <td><input type="text" name="asd[]"></td>
                <td><input type="button" value="삭제" onclick="row_del(this)" /></td>
                </tr>
                </tbody>
            </table>
        </div>

        <table class="dest">
            <caption><input type="button" value="추가" onclick="row_add(this.parentNode.parentNode)" /></caption>
            <tbody>
            </tbody>
        </table>
    </body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 5
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT