728x90
반응형
아래 이미지처럼 body를 잡고
입력한 값들이 table 아래에 row로 추가되고 삭제버튼을 누르면 삭제 되게 만들자.
삭제는 전체삭제와 한 row만 지우는 개별 삭제가 있다.
삭제는 .hasChildNodes와 .removeChild를 활용한다.
<body>
<body>
<form>
<table id ="intable">
<tr>
<th>ID</th>
<td><input type="text"name="id"/></td>
</tr>
<tr>
<th>PW</th>
<td><input type="text"name="pw"/></td>
</tr>
<tr>
<th>ADDR</th>
<td><input type="text"name="addr"/></td>
</tr>
<tr>
<th>PHONE</th>
<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>ID</th>
<th>PW</th>
<th>ADDR</th>
<th>PHONE</th>
<th>DEL</th>
</tr>
</thead>
<tbody id="addtr"></tbody>
</table>
</div>
</body>
<script>
<script type="text/javascript">
function tableVal(){
//form 태그들 중 0번지를 가져옴: 0번지에는 table, tr, th, td가 담겨있다.
var doc = document.forms[0];
//그 중 name이 id, pw, addr, phone인 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 == "" ){
alert("모두 다 입력해 주세요!");
return;
}
}
document.getElementById("addtr").appendChild(createRodw(vals));
}
function createRow(vals){
var tr = document.createElement("tr");
for(var i = 0; i<vals.length; i++){
var td = document.createElement("td");
td.textContent = vals[i];
tr.appendChild(td);
}
var deleteTd = document.createElement("td");
deleteTd.innerHTML = "<input type='button' value='삭제' onclick='delRow(this)'/>";
tr.appendChild(deleteTd);
return tr;
}
function deleteVal(){
var tbody = document.getElementById("addtr");
while(tbody.hasChildNoded()){
tbody.removeChild(tbody.lastChild);
}
}
function delRow(this){
//여기서 this는 개별삭제 버튼을 누른 자신의 태그값이다.
//<input type="button" value="삭제" onclick="delRow(this)"/>
var tr = this.parentNode.parentNode;
document.getElementById("addtr").removeChild(tr);
}
</script>728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_태그추가삭제 (0) | 2020.07.30 |
|---|---|
| [JS]DOM_getElement (0) | 2020.07.30 |
| [JS]DOM_img생성(연습) (0) | 2020.07.30 |
| [JS]DOM_element생성 (0) | 2020.07.30 |
| [JS]String (0) | 2020.07.28 |
