표 정렬하기
중요도: 5
주어진 표가 하나 있습니다.
<table>
<thead>
<tr>
<th>Name</th><th>Surname</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td><td>Smith</td><td>10</td>
</tr>
<tr>
<td>Pete</td><td>Brown</td><td>15</td>
</tr>
<tr>
<td>Ann</td><td>Lee</td><td>5</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</tbody>
</table>표에는 이보다 더 많은 행들이 있을 수 있습니다.
'name' 열을 기준으로 표를 정렬하는 코드를 작성해 보세요.
꼼수처럼 보일지도 모르겠지만 해답은 간단한데요, 상세한 설명은 아래에 있습니다.
let sortedRows = Array.from(table.tBodies[0].rows) // 1
.sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
table.tBodies[0].append(...sortedRows); // (3)풀이 과정:
<tbody>로부터 모든<tr>을 불러옵니다.- 그 후 name 필드에 해당하는 첫 번째
<td>의 내용을 기준으로 정렬합니다. - 이제
.append(...sortedRows)를 사용해 정렬된 노드를 삽입합니다.
행에 해당하는 요소들을 지울 필요 없이 ‘재삽입’ 하면 기존 위치를 저절로 벗어나게 됩니다.
예시에서는 <tbody> 가 표에 명시적으로 존재하는데요, HTML 표가 명시적으로 <tbody>를 갖지 않더라도 DOM 구조상에는 언제나 존재한다는 점을 참고하세요.