Ternary 연산자를 사용하여 자바스크립트에서의 테이블 정렬

08 Nov 2023

javascript

테이블은 웹 개발에서 자주 사용되는 요소 중 하나입니다. 이러한 테이블을 정렬하여 데이터를 보기 좋게 표시하는 것은 매우 중요합니다. 자바스크립트에서 Ternary 연산자를 사용하여 간단하게 테이블을 정렬하는 방법에 대해 알아보겠습니다.

HTML 테이블 생성

먼저, HTML에서 테이블을 생성해야 합니다. 아래 예제는 4개의 열과 3개의 행을 가진 간단한 테이블입니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>남성</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
    <td>여성</td>
    <td>디자이너</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>35</td>
    <td>남성</td>
    <td>매니저</td>
  </tr>
</table>

자바스크립트를 사용하여 테이블 정렬

이제 자바스크립트를 사용하여 테이블을 정렬해보겠습니다. 아래 코드는 테이블의 “나이” 열을 기준으로 오름차순으로 정렬하는 예제입니다.

let table = document.querySelector('table');
let rows = Array.from(table.querySelectorAll('tr')).slice(1); // 첫 번째 행은 제외

rows.sort((a, b) => {
  let aAge = parseInt(a.cells[1].textContent);
  let bAge = parseInt(b.cells[1].textContent);
  return aAge - bAge;
});

rows.forEach(row => table.appendChild(row));

위 코드에서는 Ternary 연산자를 사용하여 aAge와 bAge를 비교하고 오름차순으로 정렬합니다. aAge가 bAge보다 작을 경우 -1을 리턴하고, aAge가 bAge보다 클 경우 1을 리턴합니다. 만약 두 값이 같을 경우에는 0을 리턴하여 순서를 유지합니다.

이렇게 자바스크립트를 활용하여 테이블을 정렬할 수 있습니다.

마무리

이번 글에서는 자바스크립트에서의 Ternary 연산자를 이용하여 테이블을 정렬하는 방법에 대해 알아보았습니다. 테이블 정렬은 웹 개발에서 자주 사용되는 기능 중 하나이며, 이를 자바스크립트를 활용하여 간편하게 구현할 수 있습니다. 이를 참고하여 웹 애플리케이션 개발에 유용하게 활용해보세요.

HTML 테이블 생성

자바스크립트를 사용하여 테이블 정렬

마무리

참고 자료