W3.JS HTML 정렬
요소 정렬:
w3.sortHTML(selector)
목록 정렬
목록을 알파벳순으로 정렬하려면 버튼을 클릭하십시오.
- 오슬로
- 스톡홀름
- 헬싱키
- 베를린
- 로마
- 마드리드
예시
<button onclick="w3.sortHTML('#id01', 'li')">Sort</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
테이블 정렬
표 머리글을 클릭하여 표를 적절하게 정렬합니다.
| 이름 | 국가 |
|---|---|
| Berglund의 빠른 컵 | 스웨덴 |
| 북쪽/남쪽 | 영국 |
| 알프레드의 먹이통 | 독일 |
| 왕실 음식 | 독일 |
| 수집 식품 창고 | 이탈리아 |
| 파리 특산품 | 프랑스 |
| 섬 무역 | 영국 |
| 웃는 박카스 포도주 저장고 | 캐나다 |
예시
<table id="myTable">
<tr>
<th onclick="w3.sortHTML('#myTable','.item',
'td:nth-child(1)')">Name</th>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
</tr>
<tr class="item">
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr class="item">
<td>North/South</td>
<td>UK</td>
</tr>
<tr class="item">
<td>Alfreds
Futterkiste</td>
<td>Germany</td>
</tr>
...
</table>