추가 버튼 클릭 시 행 추가를 하고 싶습니다.
본문
게시판 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>
답변을 작성하시기 전에 로그인 해주세요.