기초공사 (html,css,javascript)

예제 -DOM2 - 하나의 tr에 td 여러개(append) 본문

academy/JavaScript

예제 -DOM2 - 하나의 tr에 td 여러개(append)

에스프레소라떼 2024. 5. 2. 13:01

//

<!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