[JavaScript] DOM( 태그 생성 및 삭제 )

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function tableVal(){
		var doc = document.forms[0];
		var vals = [doc.id.value, doc.pw.value, doc.addr.value, doc.phone.value];
		
		for (var i = 0 ; i < vals.length; i++) {
			if (vals[i] == null || vals[i] == "" || vals[i] == undefined) {
				alert("모든 항목을 입력해 주세요");
				break;
			}
		}
		document.getElementById("addtr").appendChild(createRow(vals));
	}
	
	
	
	function createRow(vals){
		var tr = document.createElement("tr");			// <tr></tr>
		for (var i = 0; i < vals.length; i++) {			// i=0 -> <tr><td>doc.id.value</td></tr>
			var td = document.createElement("td");		// i=1 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr></td>
			td.textContent = vals[i];					// i=2 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr><tr>doc.addr.value</td></tr>
			tr.appendChild(td);							// i=3 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr><tr>doc.addr.value</td><td>doc.phone.value</td></tr>
		}
		var dTd = document.createElement("td");
		dTd.innerHTML = "<input type='button' value='삭제' onclick='delRow(this)'/>";
		tr.appendChild(dTd);
		return tr;
	}
	
	
	
	function deleteVal(){
		var tbody = document.getElementById("addtr");
		while(tbody.hasChildNodes()){
			tbody.removeChild(tbody.firstChild);
		}
	}
	
	
	
	function delRow(ele){
		var delTr = ele.parentNode.parentNode;
		var tbody = document.getElementById("addtr");
		tbody.removeChild(delTr);
	}


</script>
</head>
<body>

	<form>
		<table id="intable">
			<tr>
				<td>아이디</td>
				<td><input type="text" name="id"></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pw"></td>
			</tr>
			<tr>
				<td>주소</td>
				<td><input type="text" name="addr"></td>
			</tr>
			<tr>
				<td>전화번호</td>
				<td><input type="text" name="phone"></td>
			</tr>
		</table>
		<input type="button" value="추가" onclick="tableVal();"/>
		<input type="button" value="전체삭제" onclick="deleteVal();"/>
	</form>
	<div id="addtable">
		<table border="1" id="ctb">
			<col width="100px" />
			<col width="100px" />
			<col width="300px" />
			<col width="200px" />
			<col width="100px" />
			<thead>
				<tr>
					<th>아이디</th>
					<th>비밀번호</th>
					<th>주소</th>
					<th>전화번호</th>
					<th>삭제</th>
				</tr>
			</thead>
			<tbody id="addtr"></tbody>
		</table>
	</div>
</body>
</html>

input영역에 입력된 값을 테이블 안에 넣는 코드 입니다.

	function tableVal(){
		// form 태그들 가져와서, index 0인 form 태그 -> forms로 불러왔기때문에 NodeList임... 그래서 [0]이 있어야 호출가능
		var doc = document.forms[0];
		// doc.id.value = doc이라는 form태그가 가진, name='id'인 태그의, value 값
		var vals = [doc.id.value, doc.pw.value, doc.addr.value, doc.phone.value];
		
		// 유효값 처리 
		for (var i = 0 ; i < vals.length; i++) {
			if (vals[i] == null || vals[i] == "" || vals[i] == undefined) {
				alert("모든 항목을 입력해 주세요");
				// break가 아니라 return이 들어가면 함수 자체를 종료시켜버린다.
				break;
			}
		}
		document.getElementById("addtr").appendChild(createRow(vals));
	}

우선 input영역에 null값이 하나라도 있으면 "모든 항목을 입력해 주세요"라는 메세지가 나옵니다.

break가 없고 4칸 모두 빈값이 입력되면 메세지가 4번이 출력됩니다.

하지만 break가 있기때문에 한번만 출력됩니다

모두 null값이 아니라면

document.getElementById("addtr").appendChild(createRow(vals));

명령이 실행됩니다.

일단 createRow(vals)함수로 가볼까요?

function createRow(vals){
	var tr = document.createElement("tr");			// <tr></tr>
	for (var i = 0; i < vals.length; i++) {			// i=0 -> <tr><td>doc.id.value</td></tr>
		var td = document.createElement("td");		// i=1 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr></td>
		td.textContent = vals[i];					// i=2 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr><tr>doc.addr.value</td></tr>
		tr.appendChild(td);							// i=3 -> <tr><td>doc.id.value</td><td>doc.pw.value</tr><tr>doc.addr.value</td><td>doc.phone.value</td></tr>
	}
	var dTd = document.createElement("td");
	dTd.innerHTML = "<input type='button' value='삭제' onclick='delRow(this)'/>";
	tr.appendChild(dTd);
	return tr;
}

<tr>태그를 생성하고 그안에 <td>태그를 생성합니다. 번지수에 따라 입력했던 값이 각각 들어갑니다.

그런데 입력했던 것과 별개로 4번지에 <td>태그가 하나 더 만들어집니다.

4번지 즉, 5번째 <td>태그에는 삭제버튼이 만들어지고 해당 버튼을 클릭하면 delRow(this)함수가 실행됩니다.

function delRow(ele){
	var delTr = ele.parentNode.parentNode;
	var tbody = document.getElementById("addtr");
	tbody.removeChild(delTr);
}

이 함수를 파리미터로 받아온 ele는 자기자신입니다. 누른 버튼자체를 말합니다.

delRow(this)함수를 호출할때 아규먼트로 자기 자신 this를 넣어주었기 때문입니다.

이 함수가 실행되면 해당 row가 삭제됩니다.

function deleteVal(){
	var tbody = document.getElementById("addtr");
	while(tbody.hasChildNodes()){
		tbody.removeChild(tbody.firstChild);
	}
}

deleteVal()함수는 모든 데이터를 삭제합니다!

addtr안에 있는 모든 자식요소를 값이 없어질때까지 하나씩 삭제합니다.

모든 값이 없어질때까지 삭제 되기 때문에 tbody.firstChild & tbody.lastChild 어떤것을 써도 상관없습니다.

추가 버튼을 통해 <tr>태그와 <td>태그를 생성한 모습입니다. (귀찮아서 똑같은값 입력했습니다)

해당 row를 만들때 같이 생성되었던 삭제버튼을 클릭하여 해당 row만 삭제한 모습입니다.

이번엔 전체삭제 버튼을 눌러서 모든 데이터를 한거번에 삭제 하였습니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] 백틱 `` 활용하기 (0)	2022.07.28
[JavaScript] Dom(태그 이동시키기) (0)	2022.02.01
[JavaScript] DOM( 태그 추가하기 / 이동하기 ) (0)	2022.01.31
[JavaScript] DOM( 이미지 속성 변경 ) (0)	2022.01.30
[JavaScript] DOM( img바꾸기 ) (0)	2022.01.29

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바