행추가 질문 드립니다.
본문
<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>
추가 삭제는 잘 되는 상황입니다.
헌데 사진처럼 추가를 학력 글 바로 밑에 나와버리는데
이런식으로
나오게 하고 싶은데
어디를 고쳐야하나요?
답변 1
<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 쓰시는 게 편할 겁니다.
!-->