기초공사 (html,css,javascript)
예제 -DOM2 - 하나의 tr에 td 여러개(append) 본문
//
<!DOCTYPE html>
<html lang="ko">
<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>연습문제 1</title>
<link rel="stylesheet" href="css/quiz-1.css" />
<script defer src="quiz-1.js"></script>
</head>
<body>
<div id="container">
<h1>참가자 명단</h1>
<form>
<ul id="userInput">
<li>
<label for="username">이 름</label>
<input type="text" id="username" />
</li>
<li>
<label for="major">전 공</label>
<input type="text" id="major" />
</li>
</ul>
<button>등록하기</button>
</form>
<table id="attendant">
<thead>
<tr>
<th>이 름</th>
<th>전 공</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="js/quiz-1.js"></script>
</body>
</html>//
/*
1. 새로운 요소 tr을 만든다.- const new_tr = document.createElement("tr")
--tr의 요소가 만들어졌고,
2. td2개를 받아와서 tr과 연결해줘야한다.
td2를 텍스트노드로 해야하나...??
-- tr과 td를 연결 -- new_tr.appendChild(textNode)XXX
-- tr안에 innerHTML로 안에 백틱을 이용해서 변수명을 넣는다.
new_tr.innerHTML = `${username.value} - ${major.value}
<span class=remove>삭제</span>--XXXX 이렇게 하면 td구분없이 한줄에 다들어옴.
--> 여기에서 각 td안에 맞는 value를 넣어줘야할거같은데..
--> 여기에서 매일 헷갈린다.
appendChild(td)를 해줘야할거같은데..
-- 새로운 td2개를 만든다.(셀이 두개이므로)
-- td1 : 이름의 값을 가져온다. username.value="" / ${username.value}
-- td2 : 전공의 값을 가져온다. major.value="" / ${major.value}
--> td를 구분해야한다.
td1 : 이름의값이 들어오게 const tdone = document.createElement('td')
tdone = username.value
tdtwo = major.value
td2 : 전공의 값이 들어오게 const tdtwo = document.createElement('td')
*/
const username = document.querySelector("#username");
const major = document.querySelector("#major");
const button = document.querySelector("button");
const tbody = document.querySelector("tbody");
// console.log(`${username.value}=dd`);
//이벤트
button.addEventListener("click", (e) => {
e.preventDefault();
console.dir(username); // value값이 뭐가 들어갔는지 알수있따.
// tr요소 만든다.
const new_tr = document.createElement("tr");
console.log(new_tr);
//td요소 만들기
const tdone = document.createElement("td");
console.log(tdone);
const tdtwo = document.createElement("td");
// 에러가 난 상황
// tdone = username.value;--->tdone은 그냥 문자로 인식된다.
// tdtwo = major.value;
tdone.innerText = username.value;
tdtwo.innerText = major.value;
//연결하기
new_tr.append(tdone, tdtwo); // 연결
console.dir(tdone);
// new_tr.innerHTML = `${username.value} - ${major.value}
// <span class=remove>삭제</span>
// `;
// 어디에 위치해??
tbody.appendChild(new_tr);
console.log(`최종new_tr: ${new_tr}`);
// 그 전 내용 없애기
username.value = "";
major.value = "";
});
에러가 난 상황.이해가 안되었음.-나의 표기법이 잘못 .
// 에러가 난 상황
tdone = username.value; --->tdone 은 그냥 문자로 인식된다.
tdtwo = major.value;
// 맞는 표기법
tdone.innerText = username.value;
tdtwo.innerText = major.value;
에러가 난 상황에서 처럼 코드를 짜면안되나..
tdone = username.value;는 tdone이라는 변수에 사용자 입력값(username의 값)을 직접 할당하게된다.
이 방법은 <td>태그가 아니라 단순한 문자열을 가지게 된다.
웹 페이지에 사용자의 입력을 표시하려면, DOM 요소를 생성하고, 해당 요소의 내부 텍스트에 값을 할당한 수,
이 요소를 다른 DOM요소에 추가하는 과정이 필요하다.
따라서 tdone.innerText = username.value 로 작성을 하면 새로 생성된 <td>요소의 내부 텍스트로 사용자 입력값을 설정한다.
'academy > JavaScript' 카테고리의 다른 글
| 과제-board.html- 수정까지 되었지만 - 등록이 하나만 되는 코드 (0) | 2024.05.10 |
|---|---|
| 복습-board.html - Array-fill-map (0) | 2024.05.06 |
| 백틱과 ${ } (0) | 2024.04.30 |
| 노드 배열로 작성 및 삭제 - Array / node / parentNode / remove (0) | 2024.04.29 |
| nodelist 와 htmlcollection 차 (0) | 2024.04.25 |
'academy/JavaScript' Related Articles
more
