[JavaScript] 동적 태그 만들기
- Computer/기타
- 2021. 5. 27.
반응형
동적 태그 만들기
목차
만들려는 것
추가 버튼을 누르게 되면, 버튼이 추가되는 형식에 대해 만들도록 하겠습니다.
HTML 코드
JQuery를 활용했으며, 추가 버튼을 누를 시 태그의 생성이 됩니다.
테스트를 누를 경우, 해당 테그의 값을 출력하도록 설정하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/swiper.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<style>
.box-buttons {
margin-top: 50px;
text-align: center;
font-size: 0;
}
.box-buttons .btn {
margin: 0 5px;
line-height: 40px;
height: 40px;
font-size: 1rem;
padding: 0 20px;
border: 0;
border-radius: 3px;
}
.btn
{
color : white;
text-decoration: none;
}
.box-buttons .btn-blue {
background-color: #0088cf;
}
.box-buttons .btn-gray {
background-color: #6b7f89;
}
.box-buttons .btn-red {
background-color: #f00;
}
.flex-box
{
display: flex;
}
.flex-box {
justify-content: space-between;
}
.flex-table .item.table-th .bullet {
margin-right: 5px;
color: red;
}
</style>
</head>
<body class="pg-main">
<div id="Contents">
<form>
<div class="input-section input-multi-file">
<div class="flex-table">
<div class="flex-box">
<div class="item table-th">
<span class="bullet">*</span>첨부 제목
</div>
<div class="item table-td">
<input class="w-full" type="text" name="" id='abc0' value="">
</div>
<div class="item table-th">
<span class="bullet">*</span>첨부 파일
</div>
<div class="item table-td">
<input class="w-full" type="file" name="" value="">
</div>
</div>
</div>
<div class="buttons-file">
</div>
</div>
<div class="box-buttons">
<a class="btn btn-blue" id="BtnFileAdd" href="javascript:;">추가</a>
<a class="btn btn-gray" id='BtnFileSubtract' href="javascript:;">삭제</a>
<a class="btn btn-red" id='BtnSubmit' href="javascript:;">테스트</a>
</div>
</form>
</div>
<script>
$(function() {
var cnt = 0;
$('#BtnFileAdd').click(function() {
var oEl = $('.input-multi-file').find('.flex-table');
if (oEl.find(".flex-box").length < 5) {
oEl.find(".flex-box").last().clone().appendTo(oEl);
oEl.find(".flex-box").last().find("input").val("");
var name = 'abc'+(++cnt);
oEl.find(".flex-box").last().find("input").attr('id', name);
} else {
alert('첨부서류는 최대 5개 입니다.');
}
return false;
})
$('#BtnFileSubtract').click(function() {
var oEl = $('.input-multi-file').find('.flex-table');
if (oEl.find(".flex-box").length > 1) {
oEl.find(".flex-box").last().remove();
--cnt;
} else {
alert('첨부서류는 최소 1개 입니다.');
}
return false;
})
$('#BtnSubmit').click(function() {
for(var i=0; i<=cnt; i++)
{
var name = '#abc'+i;
var alt = $(name).val();
alert(alt);
}
})
});
</script>
</body>반응형
'Computer > 기타' 카테고리의 다른 글
| OpenLayers, Layers 설정 만들기 (0) | 2021.08.27 |
|---|---|
| [Tomcat] 톰캣의 기본 설정 (1) | 2021.06.26 |
| [Tomcat] 톰켓에 SSL 적용하기 (0) | 2021.05.26 |
| [JavaScript] userAgent 사용하기 (0) | 2021.05.24 |
| [CentOs] OPEN SSL 설치 (0) | 2021.05.22 |