정렬 가능한 표

<table>
  <caption>도서 목록 <span class="sr-only">(열 머리글 버튼으로 정렬할 수 있습니다)</span></caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        <button type="button">제목 <span aria-hidden="true">▲</span></button>
      </th>
      <th scope="col">
        <button type="button">출간 연도 <span aria-hidden="true">◆</span></button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">가나다 이야기</th><td>2021</td></tr>
  </tbody>
</table>

<table id="books">
  <caption>도서 목록 <span class="sr-only">(열 머리글 버튼으로 정렬할 수 있습니다)</span></caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        <button type="button" data-type="text">제목<span class="icon" aria-hidden="true"></span></button>
      </th>
      <th scope="col">
        <button type="button" data-type="number">출간 연도<span class="icon" aria-hidden="true"></span></button>
      </th>
      <th scope="col">
        <button type="button" data-type="number">가격(원)<span class="icon" aria-hidden="true"></span></button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">가을 정원</th><td>2023</td><td data-value="14500">14,500</td></tr>
    <tr><th scope="row">나무의 시간</th><td>2021</td><td data-value="18000">18,000</td></tr>
    <tr><th scope="row">파도의 기록</th><td>2019</td><td data-value="16000">16,000</td></tr>
  </tbody>
</table>
<p class="sr-only" role="status" id="sort-status"></p>

var table = document.getElementById('books');
var status = document.getElementById('sort-status');
var tbody = table.tBodies[0];
var headers = table.querySelectorAll('thead th');
var LABEL = { ascending: '오름차순', descending: '내림차순' };

function value(row, i, type) {
  var cell = row.children[i];
  var v = cell.getAttribute('data-value') || cell.textContent.trim();
  return type === 'number' ? Number(v) : v;
}

function sortBy(i) {
  var th = headers[i];
  var btn = th.querySelector('button');
  var type = btn.dataset.type;
  var dir = th.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';

  var rows = Array.from(tbody.rows).sort(function (a, b) {
    var x = value(a, i, type), y = value(b, i, type);
    var r = type === 'number' ? x - y : String(x).localeCompare(String(y), 'ko');
    return dir === 'ascending' ? r : -r;
  });
  rows.forEach(function (row) { tbody.appendChild(row); });

  // aria-sort는 정렬 기준 열 하나에만
  headers.forEach(function (h) { h.removeAttribute('aria-sort'); });
  th.setAttribute('aria-sort', dir);

  // aria-sort 변경을 바로 읽지 않는 환경을 위한 보완 안내
  status.textContent = btn.textContent.trim() + ' 기준 ' + LABEL[dir] + '으로 정렬했습니다.';
}

headers.forEach(function (th, i) {
  var btn = th.querySelector('button');
  if (btn) btn.addEventListener('click', function () { sortBy(i); });
});

th[aria-sort="ascending"] .icon::before  { content: "▲"; }
th[aria-sort="descending"] .icon::before { content: "▼"; }
th:not([aria-sort]) .icon::before        { content: "↕"; opacity: .45; }