<!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>Step10_example2.html</title>
</head>
<body>
<button id = "showBtn">목록보기</button>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//원격지 서버로 부터 받아온 json 문자열이라고 가정
const data=`[
{"num" : 1, "name" : "김구라", "addr" : "노량진"},
{"num" : 2, "name" : "해골", "addr" : "행신동"},
{"num" : 3, "name" : "원숭이", "addr" : "상도동"}
]`;
//목록보기 버튼을 눌렀을 때 회원 목록을 tbody에 출력해 보세요.
document.querySelector("#showBtn").addEventListener("click", ()=>{
const arr=JSON.parse(data);
for(let i = 0; i < arr.length; i++){
const tr = `
<tr>
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
<td>${arr[i].addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
}
});
</script>
</body>
</html>오타를 잘 보자.......................................
'오답노트' 카테고리의 다른 글
| JAVA DbcpBean (0) | 2023.05.24 |
|---|---|
| 20230517 JAVA (0) | 2023.05.17 |
| 20230511 과제 (0) | 2023.05.11 |
| 20230428 자바 배열의 객체수 (0) | 2023.04.28 |
| 20230425 전송 받은 메세지 목록 만들기 (0) | 2023.04.25 |
댓글