W3.JS HTML Sắp xếp


Sắp xếp các phần tử:

w3.sortHTML(selector)

Sắp xếp danh sách

Nhấp vào nút để sắp xếp danh sách theo thứ tự bảng chữ cái:

  • Oslo
  • X-tốc-khôm
  • Helsinki
  • Berlin
  • la Mã
  • Madrid

Thí dụ

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

Sắp xếp bảng

Nhấp vào tiêu đề bảng để sắp xếp bảng cho phù hợp:

Tên Quốc gia
Ly nhanh của Berglund Thụy Điển
Bắc Nam Vương quốc Anh
Hộp thức ăn của Alfred nước Đức
Thức ăn hoàng gia nước Đức
Kho lương thực thu thập Nước Ý
Chuyên trang Paris Nước pháp
Island Trading Vương quốc Anh
Bacchus Winecellars cười Canada

Thí dụ

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