다연이네

[days04] 동적으로 컨트롤 생성하기 본문

Web/JavaScript

[days04] 동적으로 컨트롤 생성하기

　다연　 2020. 12. 14. 13:59
반응형

동적으로 버튼 만들기

<body>
<div id="demo"></div>
<!-- 동적으로 컨트롤 생성 -->
<script>

var txtbox = document.createElement("input"); //말그대로 이 요소를 생성한다
txtbox.setAttribute('type', 'button'); //말그대로 속성 주겠다
txtbox.setAttribute('value', '버튼1'); //말그대로 속성 주겠다
var demo = document.getElementById("demo");

demo.appendChild(txtbox); //demo의 (뒤에) 자식으로 txtbox를 추가하겠다
 
</script>
</body>

 

<style>
#demo{
	height: 200px;
	width: 200px;
	border:  solid 1px gray;
	
	overflow: auto;
}
</style>
</head>
<body>
<select id="cnt">
	<option>선택하세요</option>
</select>
<div id="demo"></div>
<script>
 var cmbbox  = document.querySelector("#cnt");
var option = new Option(1, "one"); //new : 객체생성
//<option value="ONE">1</option> 같은 의미
cmbbox.options[1]=option; 

</script>
</body>

 

리스트를 동적으로 만들어 1~20까지 숫자 넣기

 

마지막에 추가 : document.body.appendChild(cmbbox);

demo 위에 추가 : document.body.insertBefore(cmbbox,demo);

<style>
#demo{
	height: 200px;
	width: 200px;
	border:  solid 1px gray;
	
	overflow: auto;
}
</style>

</head>
<body>

<div id="demo"></div>

<script>

	
	var demo = document.getElementById("demo");
	var cmbbox = document.createElement("select");
	cmbbox.setAttribute("id", "cnt");
	//document.body.appendChild(cmbbox); 마지막으로 들어감
	//나는 위에 추가하고싶음
	document.body.insertBefore(cmbbox, demo);
	//이렇게 한 후 elements보면 select가 demo 앞에 추가된 것을 볼 수 있음
	
	cmbbox.options[0]=new Option("선택하세요");
	
	for (var i = 1; i <=20; i++) {
		var option = new Option(i,i); //new: 객체생성
		cmbbox.options[i] = option;
	}
 </script>

 

콤보박스의 숫자를 하나 선택하면 그 개수만큼 텍스트박스를 만들어 div에 추가하기

(위 코딩 밑에 아래 코딩을 추가하면 된다)

	cmbbox.addEventListener("change", function(e) {
		var cnt = cmbbox.options[cmbbox.selectedIndex].value;
		//위처럼 안해도
		//var cnt = cmbbox.value; 이렇게도 되나 , 적용안되는 브라우저도 존재
		//alert(cnt);
		
		demo.innerHTML =""; //이전 txt 박스들 지우기
		
		for (var i = 0; i < cnt; i++) {
			var txtbox = document.createElement("input");
			txtbox.setAttribute("type","text");
			txtbox.setAttribute("id","txtbox"+i);
			txtbox.setAttribute("value","txtbox"+i);
			demo.appendChild(txtbox);
		}
	}, true);

 

jQuery로 수정하기

<script>
//jquery api
//1. select id="cnt"추가
$("document").ready(function() {
	var $demo = $("<div id='demo'></div>");
	//var btn = document.createElement("button");
	$("body")
		//.append("<select id='cnt'><option>선택하세요</option></select>")
		//.append($demo);
	//한줄로 작성 가능
		.prepend("<select id='cnt'><option>선택하세요</option></select>", $demo);//, btn);
		//.prepend는 앞의 자식으로 붙이겠다
		//.append는 뒤의 자식으로
		for (var i = 1; i <=20; i++) {
			$("#cnt").append("<option value="+i+">"+i+"</option>");
		}
		$("#cnt").change(function(event) {
			var cnt = $(this).val();
			
			$("#demo").empty();
			for (var i = 0; i < cnt; i++) {
				//$("#demo").append("<input type='text' value='txtbox'"+i+">")
				
				//var $txtbox = $("<input>"); 
				//$지워도 된다 차이는?
				//$붙으면 jquery 객체이고 jquery메소드를 사용 가능하다
				
				/* 
				var $txtbox = $("<input>")
							.attr("type","text")
							.attr("id","txtbox"+i)
							.attr("value","txtbox"+i);
				 */
				 var $txtbox = $("<input>").attr({
					 			type:"text",
					 			id:"txtbox"+i,
					 			value:"txtbox"+i
							 });
				$("#demo").append($txtbox);
			}
		});
});
</script>

.prepend는 앞의 자식으로 붙이겠다
.append는 뒤의 자식으로

 

.prepend("<select id='cnt'><option>선택하세요</option></select>");

.append("<select id='cnt'><option>선택하세요</option></select>");

 

 

list  -> option을 동적으로 추가하여 색깔을 고르면 해당 색으로 배경 색이 바뀌도록 코딩

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
	var $bgcolor = $("<select id='bgcolor'></select>");
	$("body").append($bgcolor);
	
	var colors = ["white","red","green","blue"];
	colors.forEach(function(elt, i, array) {
		$bgcolor.append("<option>"+elt+"</option>");
	});
	
	$bgcolor.change(function(event) {
		document.bgColor = $(this).val(); //$(this).text()해도 됨
	});
	
</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days04] 달력 만들기  (0) 2020.12.14
[days04] js 날짜 객체 : Date  (0) 2020.12.14
[days04] 계산기 만들기  (0) 2020.12.14
[days03] js 배열  (0) 2020.12.11
[days03] 숫자와 관련된 함수  (0) 2020.12.11
'Web/JavaScript' Related Articles more
Comments