게시물 write에 칸이 자동으로 추가가 됩니다
본문
제가 게시판에 아래 형식으로 2개를 만들었습니다.
분류는 Characteristics하고 Application이며 각각 내용을 추가, 삭제를 할 수 있도록이요
Characteristics는 기본1개에서 추가를 3번해서 총4개
Application에는 기본1개만 했습니다.
그런데 수정하러 들어가면 Application가 Characteristics에 맞춰서 4개로 변해있습니다.
코드에 어떤 부분이 따라가게 되는건지 봐주십쇼ㅠㅠ
<div class="write_div">
<h2 class="tit">Characteristics</h2>
<div class="pro_cont2">
<input type="hidden" name="wr_5" value="<?=$wr_5?>">
<textarea style="display:none;" name="wr_6"><?php echo editor_html("wr_6", $write['wr_6'], $is_dhtml_editor); ?></textarea>
<ul>
<?php
$spec_title = explode('//',$wr_5);
$spec_title2 = explode('//',$wr_6);
for($i=0; $i<count($spec_title); $i++) { ?>
<li>
<input type="text" class="wr_5 frm_input" value="<?=htmlspecialchars($spec_title[$i])?>" placeholder='특징'><textarea style="display:block;" class="wr_6 frm_input" placeholder="설명"><?=htmlspecialchars($spec_title2[$i])?></textarea><a class="del">삭제</a>
</li>
<?php } ?>
</ul>
<a class="add">추가</a>
</div>
<script>
cont_val();
$(document).on("click", ".pro_cont2 .add", function() {
$(".pro_cont2 ul").append("<li><input type='text' class='wr_5' placeholder='특징'><textarea class='wr_6' placeholder='설명'></textarea><a class='del'>삭제</a></li>");
cont_val();
})
$(document).on("click", ".pro_cont2 li .del", function() {
$(this).parent().remove();
cont_val();
})
$(document).on("keyup", ".pro_cont2 li input", function() {
cont_val();
})
$(document).on("keyup", ".pro_cont2 li textarea", function() {
cont_val();
})
function cont_val() {
var val1 = "", val2 = "";
for(var i=1; i<=$(".pro_cont2 ul li").length; i++) {
if(i>1) {
val1 += "//";
val2 += "//";
}
val1 += $(".pro_cont2 ul li:nth-of-type("+i+") .wr_5").val();
val2 += $(".pro_cont2 ul li:nth-of-type("+i+") .wr_6").val();
}
$(".pro_cont2 input[name=wr_5]").val(val1);
$(".pro_cont2 textarea[name=wr_6]").val(val2);
}
</script>
</div>
<div class="write_div">
<h2 class="tit">Application</h2>
<div class="pro_cont">
<input type="hidden" name="wr_7" value="<?=$wr_7?>">
<textarea style="display:none;" name="wr_8"><?=$wr_8?></textarea>
<ul>
<?php
$spec_title3 = explode('//',$wr_7);
$spec_title4 = explode('//',$wr_8);
for($i=0; $i<count($spec_title); $i++) { ?>
<li>
<input type="text" class="wr_7 frm_input" value="<?=htmlspecialchars($spec_title3[$i])?>" placeholder='특징'><textarea style="display:block;" class="wr_8 frm_input" placeholder="설명"><?=htmlspecialchars($spec_title4[$i])?></textarea><a class="del">삭제</a>
</li>
<?php } ?>
</ul>
<a class="add">추가</a>
</div>
<script>
cont_val2();
$(document).on("click", ".pro_cont .add", function() {
$(".pro_cont ul").append("<li><input type='text' class='wr_7' placeholder='특징'><textarea class='wr_8' placeholder='설명'></textarea><a class='del'>삭제</a></li>");
cont_val2();
})
$(document).on("click", ".pro_cont li .del", function() {
$(this).parent().remove();
cont_val2();
})
$(document).on("keyup", ".pro_cont li input", function() {
cont_val2();
})
$(document).on("keyup", ".pro_cont li textarea", function() {
cont_val2();
})
function cont_val2() {
var val1 = "", val2 = "";
for(var i=1; i<=$(".pro_cont ul li").length; i++) {
if(i>1) {
val1 += "//";
val2 += "//";
}
val1 += $(".pro_cont ul li:nth-of-type("+i+") .wr_7").val();
val2 += $(".pro_cont ul li:nth-of-type("+i+") .wr_8").val();
}
$(".pro_cont input[name=wr_7]").val(val1);
$(".pro_cont textarea[name=wr_8]").val(val2);
}
</script>
</div>
답변 1
아래의 코드를 한번 참고를 해보시겠어요..
<div class="write_div">
<h2 class="tit">Characteristics</h2>
<div class="pro_cont2">
<input type="hidden" name="wr_5" value="<?=$wr_5?>">
<textarea style="display:none;" name="wr_6"><?php echo editor_html("wr_6", $write['wr_6'], $is_dhtml_editor); ?></textarea>
<ul>
<?php
$spec_title = explode('//',$wr_5);
$spec_title2 = explode('//',$wr_6);
for($i=0; $i<count($spec_title); $i++) { ?>
<li>
<input type="text" class="wr_5 frm_input" value="<?=htmlspecialchars($spec_title[$i])?>" placeholder='특징'><textarea style="display:block;" class="wr_6 frm_input" placeholder="설명"><?=htmlspecialchars($spec_title2[$i])?></textarea><a class="del">삭제</a>
</li>
<?php } ?>
</ul>
<a class="add">추가</a>
</div>
<script>
cont_val();
$(document).on("click", ".pro_cont2 .add", function() {
$(".pro_cont2 ul").append("<li><input type='text' class='wr_5' placeholder='특징'><textarea class='wr_6' placeholder='설명'></textarea><a class='del'>삭제</a></li>");
cont_val();
})
$(document).on("click", ".pro_cont2 li .del", function() {
$(this).parent().remove();
cont_val();
})
$(document).on("keyup", ".pro_cont2 li input", function() {
cont_val();
})
$(document).on("keyup", ".pro_cont2 li textarea", function() {
cont_val();
})
function cont_val() {
var val1 = "", val2 = "";
for(var i=1; i<=$(".pro_cont2 ul li").length; i++) {
if(i>1) {
val1 += "//";
val2 += "//";
}
val1 += $(".pro_cont2 ul li:nth-of-type("+i+") .wr_5").val();
val2 += $(".pro_cont2 ul li:nth-of-type("+i+") .wr_6").val();
}
$(".pro_cont2 input[name=wr_5]").val(val1);
$(".pro_cont2 textarea[name=wr_6]").val(val2);
}
</script>
</div>
<div class="write_div">
<h2 class="tit">Application</h2>
<div class="pro_cont">
<input type="hidden" name="wr_7" value="<?=$wr_7?>">
<textarea style="display:none;" name="wr_8"><?=$wr_8?></textarea>
<ul>
<?php
$spec_title3 = explode('//',$wr_7);
$spec_title4 = explode('//',$wr_8);
for($i=0; $i<count($spec_title3); $i++) { ?>
<li>
<input type="text" class="wr_7 frm_input" value="<?=htmlspecialchars($spec_title3[$i])?>" placeholder='특징'><textarea style="display:block;" class="wr_8 frm_input" placeholder="설명"><?=htmlspecialchars($spec_title4[$i])?></textarea><a class="del">삭제</a>
</li>
<?php } ?>
</ul>
<a class="add">추가</a>
</div>
<script>
cont_val2();
$(document).on("click", ".pro_cont .add", function() {
$(".pro_cont ul").append("<li><input type='text' class='wr_7' placeholder='특징'><textarea class='wr_8' placeholder='설명'></textarea><a class='del'>삭제</a></li>");
cont_val2();
})
$(document).on("click", ".pro_cont li .del", function() {
$(this).parent().remove();
cont_val2();
})
$(document).on("keyup", ".pro_cont li input", function() {
cont_val2();
})
$(document).on("keyup", ".pro_cont li textarea", function() {
cont_val2();
})
function cont_val2() {
var val1 = "", val2 = "";
for(var i=1; i<=$(".pro_cont ul li").length; i++) {
if(i>1) {
val1 += "//";
val2 += "//";
}
val1 += $(".pro_cont ul li:nth-of-type("+i+") .wr_7").val();
val2 += $(".pro_cont ul li:nth-of-type("+i+") .wr_8").val();
}
$(".pro_cont input[name=wr_7]").val(val1);
$(".pro_cont textarea[name=wr_8]").val(val2);
}
</script>
</div>