JavaScript로 HTML 테이블을 정렬하는 방법: 포괄적인 솔루션

JavaScript를 사용한 HTML 테이블 정렬: 간단한 솔루션 재검토

JavaScript에서 적합한 테이블 정렬 솔루션을 찾는 것은 어려울 수 있습니다. 특정 문자를 무시하거나 통화를 처리하지 않고 숫자를 포함하여 열을 알파벳순으로 정렬해야 할 수도 있습니다.

다행히 도움이 될 수 있는 간단하고 효과적인 JavaScript 솔루션이 있습니다.

일반 JavaScript (ES6):

• 오름차순 및 내림차순으로 알파벳 및 숫자 정렬을 모두 지원
• Chrome, Firefox, Safari는 물론 IE11에서도 작동합니다

구현 세부정보:

1. 각 테이블 헤더 셀(th)에 클릭 이벤트 리스너를 추가합니다.
2. 모든 테이블 행 검색(첫 번째 행 제외) )을 테이블에 적용합니다.
3. 클릭한 열의 값을 기준으로 행을 정렬합니다.
4. 정렬된 행을 다시 테이블에 다시 삽입합니다.

코드 조각:

<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));

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>

스타일링:

다음 CSS를 추가하여 표 스타일을 지정하고 헤더 셀을 클릭 가능하게 만듭니다.

<code class="css">table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}</code>

사용법:

HTML 문서에 JavaScript와 CSS를 포함하고 헤더 셀과 데이터 행이 있는 테이블을 추가합니다.

예:

<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><i>25</i></td>
</tr>
    <tr>
<td><a href="#">spain</a></td>
<td><i>2005-05-05</i></td>
<td></td>
</tr>
    <tr>
<td><b>Lebanon</b></td>
<td><a href="#">2002-02-02</a></td>
<td><b>-17</b></td>
</tr>
    <tr>
<td><i>Argentina</i></td>
<td>2005-04-04</td>
<td><a href="#">100</a></td>
</tr>
    <tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</table></code>

결론:

이 간단하고 효율적인 JavaScript 솔루션을 사용하면 데이터에 관계없이 열 헤더를 클릭하는 것만으로 HTML 테이블을 쉽게 정렬할 수 있습니다. 입력하세요.

위 내용은 JavaScript로 HTML 테이블을 정렬하는 방법: 포괄적인 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!