행 추가 관련해서 질문드립니다.
본문
<script type="text/javascript">
function add_item(){
// pre_set 에 있는 내용을 읽어와서 처리..
var div = document.createElement('div');
div.innerHTML = document.getElementById('pre_set').innerHTML;
document.getElementById('field').appendChild(div);
}
function remove_item(obj){
// obj.parentNode 를 이용하여 삭제
document.getElementById('field').removeChild(obj.parentNode);
}
</script>
<table id="pre_set">
<tr>
<td class="write_head" >학력#</td>
<td>
<input class='ed' style="width:100%;" name=wr_<?=$i?> id="wr_<?=$i?>" itemname="학력<?=$i?>" value="<?=$write['wr_'.$i]?>">
<span onclick="add_item();" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_add.gif"></span>
<span onclick="remove_item();" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_minus.gif"></span>
</td>
</tr>
<tr><td colspan=2 height=1 bgcolor=#e7e7e7></td></tr>
</table>
<table id="field"></table>
추가가 되면 이런식으로 되고 삭제가 되지 않습니다.
이렇게 학력이라는 글씨와 + - 는 증가하지않고 행만 추가가 되고 싶습니다.
답변 1
add_item() 함수에서 innerHTML 로 내용을 그대로 복사해서 넣으시면
나중에 추가,삭제 기능이 구현되더라도 다시 뒤엎어야할 수 있습니다.
엘리멘트 요소를 직접 하나씩 추가해서 넣으시면 별 탈 없으실겁니다.
var input_ed_cnt = 0;
function add_item(){
// pre_set 에 있는 내용을 읽어와서 처리..
//var div = document.createElement('div');
//div.innerHTML = document.getElementById('pre_set').innerHTML;
var input_ed = document.createElement("input");
input_ed.className = "ed";
input_ed.name = "wr_" + input_ed_cnt;
input_ed.id = "wr_" + input_ed_cnt;
input_ed.itemname= "학력"+ input_ed_cnt;
input_ed.value = "";
input_ed_cnt++;
document.getElementById('field').appendChild(input_ed);
}
삭제부분은 볼 시간이 없어서ㅠㅠ
