HTML-CSS/21 at main · YJ2123412/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>ObjectArraySample</title>
	<style type="text/css">
		table {
			width: 300px;
		}

		th {
			width: 13%;
			background-color: tomato;
			color: white;
		}

		td {
			width: 10%;
		}

		th,
		td {
			border: 1px solid tomato;
			padding: 7px 12px;
			text-align: center;
		}
	</style>
</head>

<body>
	<h3>오늘의 스케줄</h3>
	<h4>객체의 배열로 만드는 시간표</h4>
	<hr>
	<table>
		<tr>
			<th>TIME</th>
			<th>TODO</th>
		</tr>
		<tbody id="contents">
			<!-- 오브젝트 배열의 요소값을 가져다가 tr태그 1개 행 만들기를 배열 요소만큼 반복-->
		</tbody>
	</table>
	<hr>
	<button id="addBtn">스케줄 추가(DOM)</button>
	<button id="sortBtn">시간순서로 정렬</button>
	<script type="text/javascript">
		const schedules = [{ time: '09:00', todo: '수업' },
		{ time: '11:00', todo: '과제' },
		{ time: '12:30', todo: '점심식사' },
		{ time: '14:00', todo: '주간회의' },
		{ time: '16:45', todo: '자료조사' }]

		setView()
		function setView() {
			const tbody = document.getElementById('contents')
			//todo(1):     tbody 초기화
			tbody.innerHTML = '';

			schedules.forEach((obj) => {
				console.log(obj)
				console.log(obj.time)
				console.log(obj.todo)
				const tr = document.createElement('tr')
				tr.innerHTML = `<td>${obj.time}</td><td>${obj.todo}</td>`
				tbody.appendChild(tr)
			})
		}

		//addEventListener('이벤트이름',함수) 는 태스 속성 onXXXX = 함수 를 대신하는
		//				이벤트 핸들러 메소드 입니다.
		document.getElementById('addBtn').addEventListener('click', () => {		//추가
			const atime = prompt('시간을 입력하세요.')
			const atodo = prompt('할일을 입력하세요.')

			const temp = { time: atime, todo: atodo }
			//todo(2) : 배열 마지막 요소로 추가
			schedules.push(temp);

			const newtr = document.createElement('tr')   //1)새로운 태그요소 생성하기
			const newtd = `<td>${atime}</td>
	            <td>${atodo}</td>`
			//todo(3):   tr태그에 들어갈 내용 저장하기
			newtr.innerHTML = newtd;
			document.getElementById('contents').appendChild(newtr)
		})

		document.getElementById('sortBtn').addEventListener('click', function () {		//정렬
			schedules.sort((a, b) => {		//a,b는 객체
				//a,b 중에 작은 값이 값이 무엇인지 정렬 알고리즘이 알수 있도록 리턴 설정
				if (a.time < b.time)   //a,b 객체의 time 프로퍼티 비교(시간순 정렬)
					return -1
				else return 1
			})
			console.log(schedules)

			setView()
		})
	</script>
</body>

</html>