728x90
반응형
기존에 썼던 코드를 그대로 가져와서 적은거라 좀 장황한데
# 셈플1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function AddCareerLine(){
var cnt = $('.career').length;
// textarea 추가
var nCareer = document.createElement("textarea");
var sName = 'careerList['+ cnt +'].career';
var sId = 'career'+cnt;
nCareer.setAttribute("rows", 3);
nCareer.setAttribute("cols", 120);
nCareer.setAttribute("name", sName);
nCareer.setAttribute("id", sId);
nCareer.setAttribute("class", "career");
document.getElementById("tchrCreear").appendChild(nCareer);
// 줄바꿈
var tagBr = document.createElement("br");
document.getElementById("tchrCreear").appendChild(tagBr);
}
function DeleteCareerLine(){
var cnt = $('.career').length;
// textarea가 2개 이상인 경우 마지막 textarea를 삭제
if (cnt > 1) {
var sId = 'career' + (cnt-1);
$('#'+sId).remove();
}else {
console.log('textarea count : 1');
}
}
|
cs |
javascript로 만드는 건데
태그를 만들고 var nCareer = document.createElement("textarea");
태그의 속성을 지정한다 nCareer.setAttribute("rows", 3);
마지막으로 특정 태그 하위에 자식으로 넣어준다. document.getElementById("tchrCreear").appendChild(nCareer);
삭제는 jquery를 썼는데 이렇게 삭제한다. $('#'+sId).remove();
# 셈플2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 재료 입력 div 추가
function addMaterialfrm(){
var addIndex = $("#main_nextIndex").val();
$("#main_nextIndex").val(Number(addIndex) + 1 );
var addDivTag = "<div id='main_div_" + addIndex + "' style='margin-bottom: 5px;'>";
addDivTag += "<input type='text' name='main[" + addIndex + "].mtrlNm' id='main[" + addIndex + "].mtrlNm' placeholder='재료명' style='width:250px;margin-right: 22px;'>";
addDivTag += "<input type='text' name='main[" +addIndex + "].qty' id='main[" + addIndex + "].qty' placeholder='수랑' style='width:250px;margin-right:5px;'>";
addDivTag += "<input type='hidden' name='main[" +addIndex + "].mtrlSeq' id='main[" + addIndex + "].mtrlSeq' value='0'/>";
addDivTag += "<input type='hidden' name='main[" +addIndex + "].mtrlTp' id='main[" + addIndex + "].mtrlTp' value='main'/>";
addDivTag += "<button type='button' class='btn btn-danger btn-sm' onclick='delMaterialfrm(`main`, " + addIndex +")'><i class='glyphicon glyphicon-minus'></i></button>";
addDivTag += "</div>";
$("#main_span").append(addDivTag);
}
// 재료 입력 div 삭제
function delMaterialfrm(id){
var delDivId = "main_div_" + id;
$("#"+delDivId).remove();
}
|
cs |
이건 그냥 스트링으로 하나하나 써서 만든 경우.
복잡해 보이지만 사실 간단한 내용으로 스트링으로 태그를 모두 작성하고
마지막에 jquery로 특정 태그 하위에 추가한다. $("#main_span").append(addDivTag);
* 관련글
[javascript, jquery] 동적 tag 추가시 이벤트 : https://deonggi.tistory.com/119
728x90
반응형
'코딩 삽질' 카테고리의 다른 글
| [oracle] link db (0) | 2019.11.17 |
|---|---|
| [git] remote 추가 (0) | 2019.11.17 |
| [javascript] ckeditor 유효성 체크 (0) | 2019.11.06 |
| [메모] 네이버 클라우드 서버 - 윈도우 서버 세팅 (0) | 2019.11.06 |
| [tomcat] memory leak 에러 (0) | 2019.11.05 |