➡️ 이번에 만든 방명록은 작성자와 내용을 쓰고 작성 버튼을 누르면 아래 table에 자동으로 입력되고, 작성일도 작성한 시간으로 나오게끔 하는 방명록을 만들어보았다.(초기화는 아직 구상중이다.. 곧 업데이트 하겠다.)
js 위주로 봐주시면 감사하겠다...🙏🏻
css, html 코드
1️⃣ 우선 작성자와 내용은 <input> 으로 가져왔다. content는 width만 따로 지정해주었다.
2️⃣ 그 다음 버튼은 onclick에서 js에서 만들 함수를 받아오게 html에서 짠다음, table의 기본 구조를 만들어주었다.(head와 기본값 세팅을 위해)
Js 코드
3️⃣ 작성자와 내용의 값을 받아오기 위해 .value를 사용해야한다.
그리고 값이 추가될때마다 열과 행이 각각 추가되어 table에 추가되도록 만들어야 한다.
따라서 행을 생성하고 그 행에 append()를 사용해서 순서대로 추가시켜주고, 각각의 열에는 값을 넣어주면 된다.
(+) 번호도 행이 추가될때마다 +1씩 진행되게 해주면 되므로, 변수를 하나 만들어서 증가하게끔 해주면된다.
(+) 작성일도 넣을때마다 그 해당 시각을 받아야 하므로 new Date()을 이용하면 된다.
구조만 잘 짜면 그렇게 어렵지 않았던 것 같다!
let tbody = document.getElementsByTagName('tbody')[0];
➡️ .getElementsByTagName 는 계속 쌓이니까 지정을 해줘야하므로 [0]을 추가했다.
➡️ 아래의 요소 선택하는 방법들은 대부분 배열을 선택한다는 것을 참고로 알아두자.
• document.getElementsByClassName(클래스 이름)
• document.getElementsByTagName(태그 이름)
• document.getElementsByName(name 이름)
실행결과
회고
value를 따로 받아서 그걸 table에다가 넣는 방법은 너무 신기했다. 그리고 작성일도 실시간으로 기입되서 이 방법은 정말 많은 곳에 사용될 것 같다..!!👍🏻
그리고 JQuery를 배우면 DOM요소로 만든 방명록도 다른 방법으로 코드를 짤 수 있을 것 같다. 더 간단하고 알아보기 쉽게 할 수 있지 않을까 싶다..!
