행추가 시 데이터 값 다르게 저장하는 방법
본문
이건 제가 인터넷에서 소스를 찾아서 내가 하고자 하는 소스를 약간 수정을 했습니다.
추가버튼을 누르면 행 추가 되는데 제가 초보라서 모르겠어 질문을 드려요 추가를 하면 데이터 값도 같이 떱니다. 각자 입력된 값을 다르게 하고 싶은데 어떻게 하면 좋을까요?
제가 가지고 있는 소스입니다
<!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; }
</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[1]">
<option value="">학년선택</option>
<option value="유아·어린이"<?php echo ($write['wr_1'] == "유아·어린이") ? " selected" : "";?>>유아·어린이</option>
<option value="1학년"<?php echo ($write['wr_1'] == "1학년") ? " selected" : "";?>>1학년</option>
<option value="2학년"<?php echo ($write['wr_1'] == "2학년") ? " selected" : "";?>>2학년</option>
<option value="3학년"<?php echo ($write['wr_1'] == "3학년") ? " selected" : "";?>>3학년</option>
<option value="4학년"<?php echo ($write['wr_1'] == "4학년") ? " selected" : "";?>>4학년</option>
<option value="5학년"<?php echo ($write['wr_1'] == "5학년") ? " selected" : "";?>>5학년</option>
<option value="6학년"<?php echo ($write['wr_1'] == "6학년") ? " selected" : "";?>>6학년</option>
</select></td>
<td><select name="asd[2]">
<option value="">반선택</option>
<option value="유아·어린집"<?php echo ($write['wr_2'] == "유아·어린집") ? " selected" : "";?>>유아·어린집</option>
<option value="1반"<?php echo ($write['wr_2'] == "1반") ? " selected" : "";?>>1반</option>
<option value="2반"<?php echo ($write['wr_2'] == "2반") ? " selected" : "";?>>2반</option>
<option value="3반"<?php echo ($write['wr_2'] == "3반") ? " selected" : "";?>>3반</option>
<option value="4반"<?php echo ($write['wr_2'] == "4반") ? " selected" : "";?>>4반</option>
<option value="5반"<?php echo ($write['wr_2'] == "5반") ? " selected" : "";?>>5반</option>
<option value="6반"<?php echo ($write['wr_2'] == "6반") ? " selected" : "";?>>6반</option>
<option value="7반"<?php echo ($write['wr_2'] == "7반") ? " selected" : "";?>>7반</option>
<option value="8반"<?php echo ($write['wr_2'] == "8반") ? " selected" : "";?>>8반</option>
<option value="9반"<?php echo ($write['wr_2'] == "9반") ? " selected" : "";?>>9반</option>
<option value="10반"<?php echo ($write['wr_2'] == "10반") ? " selected" : "";?>>10반</option>
</select></td>
<td><input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_8" class="frm_input" placeholder="명수 입력" size="20"></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>
답변 1
function row_add(table) {
var tmpl = document.getElementById("tmpl");
var tr = (tmpl.getElementsByTagName("table")[0].rows[0]).cloneNode(true);
// --------------------------- 추가
var inputs = tr.querySelectorAll('select, input[type="text"]');
inputs.forEach(function (el, idx, nodes) {
el.value = '';
});
// --------------------------- 추가
table.getElementsByTagName("tbody")[0].appendChild(tr);
}
감사합니다.
