Javascript/연습
event.preventDefault() +버블링 + form + parentElement로 데이터 넘기고 삭제
SEOKIHOUSE
2023. 6. 2. 12:53
form으로 값 넘기는거 했는데 이거로 하니깐 값이 안나오네..
event.preventDefault이거로 하라고 하신다 이거쓰면 값이 안넘어가서 여기서 이용가능
<tbody>를 안만들어주고 해서
이렇게 되는게 아니라
이렇게 되네... 그래서 어쩔수없이 삭제할 때 이렇게 했다
(why? 만등러줄때 tbody를 안넣고 만들어서 등록할 시 tbody안에 td가 들어가서 //tbody가 여러개 만들어진다)
- tbody기준으로 버블링
tbody를 안만들어줘서 만들어줄때마다 생겨서 만들어 줄때도 tbody를 전부 다 가져와서 했다(querySelectorAll)
- table기준으로 버블링
- 헷갈린 부분;;
- 이부분으로 공백을 넣고 입력했을 때 등록이 안되도록 하는 부분
- 처음에 charAt(0)으로 했는데 이거는 제일 앞칸만 공백체크해줘서 trim() 쓰는게 좋다고 하심미다
- else if문에 들어와서 frm.number.value.trim() 을 거치고 나니까 일단 공백을 다 제거해준 뒤에 ""인지 체크한다
- 그래서 공백이 다 제거되면서 등록이 되는겅미
- 만약 공백만 넣으면 alert가 뜬다
그리고 처음에 1번방식으로 했는데 2번방식이 더 쉽다..;;;
- 이렇게 form을 만들어주고 하면 그 아래 있는 속성에 name에 바로 접근할 수 있는 것 같다
form을 없애고 한번 name.vaule로 바로 가져와지나 했는데 안됨..
그래서 let name = document.querySelector("input[name=name]"); 이부분을 주석해제하고 값을 가져와야 한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
span {
display: inline-block;
width: 70px;
}
table {
border-collapse: collapse;
}
table tr th,
table tr td {
border: 1px solid black;
text-align: center;
padding: 5px;
}
#th1 {
width: 50px;
}
#th2 {
width: 70px;
}
#th3 {
width: 170px;
}
#th4 {
width: 70px;
}
table tr th {
background-color: cornflowerblue;
}
table tr td {
background-color: darkseagreen;
}
#wrap {
display: grid;
justify-content: center;
align-items: center;
}
#se1 {
align-self: start;
margin: 50px 0;
display: flex;
justify-content: center;
}
#se2 {
align-self: start;
}
#div1 {
margin: 10px 0;
text-align: center;
}
#div1 input {
width: 100px;
}
</style>
<script>
window.onload = function () {
let number = document.getElementById("num1");
let contact = document.querySelector("#contact1");
let sbmit = document.getElementById("sbmit");
let tables = document.querySelector("table");
sbmit.addEventListener("click", sb);
function sb(event) {
//이벤트가 가지고 있는거 안하게끔 하는거submit
event.preventDefault();
//자바스크립트 자료형에서 false로 반환되는 값은
//"", null, undefined, 0, NaN 나머지는 true라 한다
if(!frm.number.value || !document.frm.name.value ||!frm.contact.value ) {
// if (!(frm.number.value && document.frm.name.value && frm.contact.value)) {
alert("값입력하세용");
}
else if (frm.number.value.trim() == ""|| frm.name.value.trim() == ""|| frm.contact.value.trim() == "") {
alert("글자앞에 공백이 있슴다");
}
// else if(frm.number.value.charAt(0) == " "|| frm.name.value.charAt(0) == " "|| frm.contact.value.charAt(0) == " ") {
// alert("글자앞에 공백이 있습니다");
// }
else {
tables.innerHTML +=
"<tr>" +
"<td>" + frm.number.value + "</td>" +
"<td>" + document.frm.name.value + "</td>" + //name으로 바로 넘김
"<td>" + frm.contact.value + "</td>" +
"<td><button id='btnDel'>삭제</button></td>" +
"</tr>"
//1번방법
let tbodys = document.querySelectorAll("tbody");
for (let i = 0; i < tbodys.length; i++) {
tbodys[i].addEventListener("click", del);
}
}
}
//2번방법
// tables.addEventListener("click",del);
function del(event) {
if (event.currentTarget.id == event.target.id) {
return;
} else {
//tr까지 삭제하면 tbody가 남아서 여기선 tbody삭제하는 걸 쓰자
//why? 만등러줄때 tbody를 안넣고 만들어서 등록할 시 tbody안에 td가 들어가서
//tbody가 여러개 만들어진다
// event.target.parentElement.parentElement.remove(); //tr까지 삭제
//----------------------------------------------------------
event.target.parentElement.parentElement.parentElement.remove(); //tbody까지 삭제
}
//이게 더쉽다
// if(event.target.id =="btnDel") {
// event.target.parentElement.parentElement.parentElement.remove(); //tbody까지 삭제
// }else {
// return;
// }
}
}
</script>
</head>
<body>
<div id="wrap">
<section id="se1">
<form name="frm" action="">
<div>
<span>번호</span><input type="text" name="number" id="num1" placeholder="번호를 입력하세요">
</div>
<div>
<span>이름</span><input type="text" name="name" id="name1" placeholder="이름을 입력하세요">
</div>
<div>
<span>연락처</span><input type="text" name="contact" id="contact1" placeholder="연락처를 입력하세요">
</div>
<div id="div1">
<input type="submit" value="등록" id="sbmit">
</div>
</form>
</section>
<section id="se2">
<table>
<tr>
<th id="th1">번호</th>
<th id="th2">이름</th>
<th id="th3">연락처</th>
<th id="th4">삭제</th>
</tr>
</table>
</section>
</div>
</body>
</html>bandicam 2023-06-02 12-42-07-574.mp4
0.64MB