weather.js
const arr = [ { "date": "29일(토) 오전", "weather": "구름많음", "rainPercent": "20%" }, { "date": "29일(토) 오후", "weather": "구름많음", "rainPercent": "10%" }, { "date": "30일(일) 오전", "weather": "맑음", "rainPercent": "10%" }, { "date": "30일(일) 오후", "weather": "맑음", "rainPercent": "10%" }, { "date": "31일(월) 오전", "weather": "구름많음", "rainPercent": "20%" }, { "date": "31일(월) 오후", "weather": "구름많음", "rainPercent": "10%" }, { "date": "01일(화) 오전", "weather": "구름많음", "rainPercent": "20%" }, { "date": "01일(화) 오후", "weather": "구름많음", "rainPercent": "20%" }, { "date": "02일(수) 오전", "weather": "구름많음", "rainPercent": "30%" }, { "date": "02일(수) 오후", "weather": "구름많음", "rainPercent": "40%" }, { "date": "03일(목)", "weather": "흐림", "rainPercent": "40%" }, { "date": "04일(금)", "weather": "흐림", "rainPercent": "40%" }, { "date": "05일(토)", "weather": "흐림", "rainPercent": "40%" } ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-weather.html</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
margin: 50px auto;
}
td, th {
padding: 10px;
border: 1px solid grey;
width: 70px;
text-align: center;
}
</style>
</head>
<body>
<h1>05-weather.html</h1>
<hr>
<table></table>
<script src="weather_20230726.js"></script>
<script>
const dateList = arr.map(ob => ob.date)
console.log(dateList)
let tag = '<tr>'
let tmp = '' // 이전 단계에서 저장한 이름(날짜)
dateList.forEach(ob => {
const titleArr = ob.split(' ') // 오전오후가 포함되면 길이가 2
if(titleArr[0] == tmp) { // 오전오후가 없으면 길이가 1
return
}
tmp = titleArr[0]
tag += `<td colspan="${titleArr.length}" rowspan="${titleArr.length == 1 ? 2 : 1}">`
tag += titleArr[0]
tag += '</td>'
})
tag += '</tr>'
tag += '<tr>'
dateList.forEach(ob => {
const titleArr = ob.split(' ')
if(titleArr.length == 1) {
return
}
tag += `<td>${titleArr[1]}</td>`
})
tag += '</tr>'
tag += '<tr>'
arr.forEach(ob => {
tag += `<td>${ob.weather}<br>${ob.rainPercent}</td>`
})
tag += '</tr>'
document.querySelector('table').innerHTML += tag
</script>
</body>
</html>
Never give up!!