<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-dom-sort.html</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
border: 1px solid grey;
}
thead {
background-color: #dadada;
}
thead > tr > th:hover {
cursor: pointer;
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>03-dom-sort.html</h1>
<hr>
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>짱구</td>
<td>8</td>
</tr>
<tr>
<td>훈이</td>
<td>5</td>
</tr>
<tr>
<td>철수</td>
<td>9</td>
</tr>
<tr>
<td>유리</td>
<td>7</td>
</tr>
<tr>
<td>맹구</td>
<td>10</td>
</tr>
<tr>
<td>흰둥이</td>
<td>6</td>
</tr>
</tbody>
</table>
<script>
const ageTh = document.querySelector('thead > tr > th:nth-child(2)')
function sortByAge() {
// 테이블에 저장된 데이터를 나이 오름차순으로 정렬하기
// 1) 정렬 대상이 되는 문서 요소를 불러온다
// 여기서는 tbody 의 자손 tr
const trList = document.querySelectorAll('tbody > tr')
// 2) 정렬하기 위해서는 sort함수가 필요하지만
// querySelectorAll() 함수는 NodeList 형태로 반환하고
// NodeList에는 forEach 함수만 있고 sort 함수는 없다
// 따라서, sort 함수를 사용할 수 있는 Array타입으로 바꿔야 한다
const trArray = Array.from(trList)
// 3) Array를 이용하여 sort함수를 수행한다
trArray.sort((a, b) => {
// 나이를 불러와서 숫자 형식으로 비교해야 한다
const ageA = +a.querySelector('td:nth-child(2)').innerText
const ageB = +b.querySelector('td:nth-child(2)').innerText
return ageA > ageB ? 1 : -1
})
// 4) 자바스크립트 내부에서는 정렬이 되어있으나, 문서에 반영되지 않았다
// appendChild는 대상 요소가 문서에 없으면 아래에 추가한다
// 대상 요소가 이미 문서에 있던 요소이면, 기존 요소를 빼서 맨 아래로 돌린다
const tbody = document.querySelector('tbody')
trArray.forEach(tr => tbody.appendChild(tr))
}
ageTh.onclick = sortByAge
const nameTh = document.querySelector('thead > tr > th:nth-child(1)')
function sortByName() {
const trArr = Array.from(document.querySelectorAll('tbody > tr'))
trArr.sort((a, b) => {
const nameA = a.querySelector('td').innerText
const nameB = b.querySelector('td').innerText
return nameA > nameB ? 1 : -1
})
const tbody = document.querySelector('tbody')
trArr.forEach(tr => tbody.appendChild(tr))
}
nameTh.onclick = sortByName
</script>
</body>
</html>
Never give up!!