JavaScript로 HTML 테이블을 알파벳순으로 정렬하는 방법은 무엇입니까?

JavaScript로 HTML 테이블 정렬

많은 개발자가 테이블 정렬을 위해 JavaScript 솔루션을 찾고 있습니다. 간단하고 효과적인 해결책은 각 열을 알파벳순으로 정렬하는 것입니다. 이 솔루션은 코드, 숫자 또는 통화를 무시하고 텍스트에만 집중해야 하는 요구에 적합합니다.

솔루션 개요

이 솔루션에는 각 헤더 셀에 클릭 이벤트를 추가하는 작업이 포함됩니다. . 각 테이블에 대해 첫 번째 행을 제외한 모든 행을 찾아 클릭한 열의 값을 기준으로 정렬합니다. 정렬되면 새 순서로 테이블에 행을 다시 삽입합니다.

구현 세부 정보

1. 이벤트 처리: 추가 모든 번째 셀에 대한 클릭 이벤트.
2. 행 검색: 클릭한 테이블에서 첫 번째 행(tr:nth-child(n 2))을 제외한 모든 행을 추출합니다.
3. 정렬 논리: 열 인덱스 idx와 asc 플래그라는 두 개의 인수를 사용하는 정렬 함수 비교자를 만듭니다. 이 기능은 클릭한 열의 텍스트 내용을 기준으로 행을 정렬합니다.
4. 테이블 업데이트: 행을 정렬한 후 새 순서로 테이블에 다시 추가합니다.

JavaScript 및 HTML의 코드 예

<code class="javascript">const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// Event Handling
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));</code>

<code class="html"><table>
    <tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
    <tr>
<td>France</td>
<td>2001-01-01</td>
<td>25</td>
</tr>
    <tr>
<td>spain</td>
<td>2005-05-05</td>
<td></td>
</tr>
    <tr>
<td>Lebanon</td>
<td>2002-02-02</td>
<td>-17</td>
</tr>
    <tr>
<td>Argentina</td>
<td>2005-04-04</td>
<td>100</td>
</tr>
    <tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</table></code>

이 솔루션은 외부 종속성 없이 열 헤더를 한 번만 클릭하면 HTML 테이블을 알파벳순으로 효율적으로 정렬합니다. 단순성과 주요 브라우저와의 호환성 덕분에 다양한 정렬 요구 사항에 적합한 옵션이 됩니다.

위 내용은 JavaScript로 HTML 테이블을 알파벳순으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!