JS 관련/JavaScript
[JavaScript] DOM( 태그 생성 및 삭제 )
씨네
2022. 2. 2. 13:54
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