채택완료

행추가 질문 드립니다.

2016-10-20 (목) 17:14:08 2,771

<tr>

    <table id='tbl' border="0" cellspacing="0" cellpadding="0" background="#ddd" width="100%"> 

        <tbody id='tbd'>

        <tr>

            <td class=write_head style="width:85px">학력#<br>

                 <span onclick="add_tr()" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_add.gif"></span> 

                <span onclick="del_row();" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_minus.gif"></span>

             </td>

            <td>

                <input class='ed' style="width:99%;" name="opty_subj[]" itemname="학력" required >

            </td>

            <tr><td colspan=2 height=1 bgcolor=#e7e7e7></td></tr>

        </tr>

        </tbody>

    </table>

</tr>

--------------------------------------------

<script>

    var tbl = document.getElementById('tbl');

    var thd = document.getElementById('thd');

    var tbd = document.getElementById('tbd');

    var tr = null;

    var td = null;

    var x=1, y=1;

    function add_tr() 

    {

        // 행 제목 추가

        tr = document.createElement('tr');

        tbd.appendChild(tr);

        td = document.createElement('td');

        tr.appendChild(td);

        add_input('opty_subj[]');

        // 열의 갯수에 따라 추가된 행의 열 추가

        var thd_td = thd.getElementsByTagName('td');

        for (i=0; i<thd_td.length-1; i++)

        {

            td = document.createElement('td');

            tr.appendChild(td);

            add_input('opt[][]');

        }

    }

    function add_input(name)

    {

        var inp = document.createElement('input');

        inp.setAttribute('class', 'ed');

        inp.setAttribute('name', name);

        td.appendChild(inp);

    }

    function del_row()

    {

        var tbd_tr = tbd.getElementsByTagName('tr');

        //document.getElementById('msg').innerHTML = tbd_tr.length;

        if (tbd_tr.length > 1)

            tbd.deleteRow(tbd_tr.length-1);

    }

</script>

1a1220b80e397767f7a45a38c5de0640_1476951165_205.PNG
 

추가 삭제는 잘 되는 상황입니다.

헌데 사진처럼 추가를 학력 글 바로 밑에 나와버리는데

1a1220b80e397767f7a45a38c5de0640_1476951229_0966.PNG
이런식으로

나오게 하고 싶은데

어디를 고쳐야하나요?

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
2016-10-20 (목) 17:32:45
Copy
<script type="text/javascript">$(function() {    $("#add-obj").click(function() {        var obj = $("#tbl").find("input.ed");        obj.last().clone().insertAfter(obj.last());    });    $("#remove-obj").click(function() {        var obj = $("#tbl").find("input.ed");        var len = obj.length;        if(len == 1) {            alert("더 이상 삭제 안 됨");        } else {            $("#tbl").find("input.ed").last().remove();        }    });});</script><table id='tbl' border="0" cellspacing="0" cellpadding="0" background="#ddd" width="100%">     <tbody id='tbd'>        <tr>            <td class=write_head style="width:85px">학력#<br>                <span id="add-obj" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_add.gif"></span>                 <span id="remove-obj" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_minus.gif"></span>             </td>            <td>                <input class='ed' style="width:99%;" name="opty_subj[]" itemname="학력" required >            </td>            <tr><td colspan=2 height=1 bgcolor=#e7e7e7></td></tr>        </tr>    </tbody></table>

jquery 쓰시는 게 편할 겁니다. 

답변에 대한 댓글 1개

더 열심히 공부해야할거같습니다. 왕계라님덕분에 해결되었습니다. 감사합니다!!

답변을 작성하려면 로그인이 필요합니다.