<!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>board.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container1">
<div class="title">
<a href="main.html">
<input type="button" class="mainbutton" value="NAVER">
</a>
</div>
<h3>게시판목록</h3>
<hr />
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>날짜</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목</td>
<td>가나다</td>
<td>24</td>
<td>2021/12/08</td>
</tr>
<tr>
<td>2</td>
<td>제목</td>
<td>마바사</td>
<td>62</td>
<td>2021/12/10</td>
</tr>
</tbody>
</table>
</div>
<script>
// const a = 1; console.log(a); -> 1
// const b = [1]; console.log(b[0]); -> 1 << 배열임!
// <tbody> [<tbody>]
const b1 = document.getElementsByTagName('tbody');
console.log(typeof b1);
// typeof = 이게 무슨 타입인지 알려주는 태그
// typeof b1의 결과 -> object. object는 배열이나 Json를 뜻함
// console.log(b1[0]);
console.log(b1[0].innerText); // 배열로 찾아야함. getElement's' 복수이기 때문
console.log(b1[0].innerHTML);
b1[0].innerHTML += // b1[0].innerHTML -> 기존 내용. 거기에 더할려면 +=
"<tr>" + // + 안하고 그냥 = 하면 덮어쓰기
"<td>1</td>" +
"<td>제목</td>" +
"<td>가나다</td>" +
"<td>24</td>" +
"<td>2021/12/08</td>" +
"</tr>";
// 백엔드에서 데이터를 받아서 items에 보관한다고 가정
const items = [
{no:3, title:'제3', writer:'a30', hit:42, regdate:"2021/12/10"},
{no:4, title:'목4', writer:'a30', hit:12, regdate:"2021/12/10"}
];
//[{},{}] <<이 모양으로 데이터가 오면 -> {}, {} << 이 모양으로 바꿔야함. 반복문 통해서
for(let tmp of items){ // 반복문
console.log(tmp.no, tmp.title, tmp.hit); // 원하는 데이터를 꺼낼 때 '.title' 이렇게 점을 찍으면 된다
b1[0].innerHTML +=
"<tr>" +
`<td>${tmp.no}</td>` + // ${ } <- 이건 변수다!!!! 를 나타냄
`<td>${tmp.title}</td>` +
`<td>${tmp.writer}</td>` +
`<td>${tmp.hit}</td>` +
`<td>${tmp.regdate}</td>` +
"</tr>";
}
</script>
</body>
</html>
20211208-