<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonToElement</title>
<style>
table {
border-collapse: collapse;
border: 2px solid black;
}
td, th {
padding: 10px;
border: 1px solid grey;
min-width: 70px;
}
th {
background-color: #dadada;
}
.blue {
background-color: lightskyblue;
}
.red {
background-color: lightpink;
}
.user {
font-weight: bold;
}
</style>
</head>
<body>
<h1>08-jsonToElement.html</h1>
<hr>
<table>
<thead>
<tr>
<th>플레이어</th>
<th>팀</th>
<th>챔피언</th>
<th>Kill</th>
<th>Death</th>
<th>Assist</th>
<th>Damage</th>
<th>CS</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="opgg_result.js"></script>
<script>
const tbody = document.querySelector('tbody')
let tag = ''
arr.forEach(ob => {
const team = ob.team == '블루' ? 'blue' : 'red'
tag += `<tr class="${team}">`
tag += ` <td class="user">${ob.user}</td>`
tag += ` <td class="team">${ob.team}</td>`
tag += ` <td class="champion">${ob.champion}</td>`
tag += ` <td class="kill">${ob.kill}</td>`
tag += ` <td class="death">${ob.death}</td>`
tag += ` <td class="assist">${ob.assist}</td>`
tag += ` <td class="damage">${ob.damage}</td>`
tag += ` <td class="cs">${ob.cs}</td>`
tag += `</tr>`
})
tbody.innerHTML += tag
</script>
</body>
</html>opgg_result.js
const arr = [
{
"user": "TrynMst",
"champion": "퀸",
"team": "블루",
"kill": 7,
"death": 7,
"assist": 7,
"damage": 27176,
"cs": 173
},
{
"user": "강승우의 제발PLZ",
"champion": "마오카이",
"team": "블루",
"kill": 4,
"death": 6,
"assist": 17,
"damage": 22744,
"cs": 144
},
{
"user": "Hide on bush",
"champion": "산드라",
"team": "블루",
"kill": 8,
"death": 3,
"assist": 10,
"damage": 42702,
"cs": 274
},
{
"user": "128482031",
"champion": "바루스",
"team": "블루",
"kill": 14,
"death": 5,
"assist": 8,
"damage": 31350,
"cs": 277
},
{
"user": "남궁성훈",
"champion": "카르마",
"team": "블루",
"kill": 0,
"death": 4,
"assist": 27,
"damage": 17341,
"cs": 40
},
{
"user": "망나니박진수",
"champion": "말파이트",
"team": "레드",
"kill": 5,
"death": 4,
"assist": 9,
"damage": 14605,
"cs": 205
},
{
"user": "스물다섯번째밤",
"champion": "그라가스",
"team": "레드",
"kill": 10,
"death": 6,
"assist": 8,
"damage": 24502,
"cs": 184
},
{
"user": "HIYEON",
"champion": "세트",
"team": "레드",
"kill": 2,
"death": 9,
"assist": 3,
"damage": 8344,
"cs": 115
},
{
"user": "Every Sec0nd",
"champion": "제리",
"team": "레드",
"kill": 7,
"death": 7,
"assist": 8,
"damage": 20191,
"cs": 296
},
{
"user": "귀여워서 죄송합니다",
"champion": "하이머딩거",
"team": "레드",
"kill": 0,
"death": 7,
"assist": 11,
"damage": 16797,
"cs": 26
}
]
Never give up!!