W3.JS Sortowanie HTML


Sortuj elementy:

w3.sortHTML(selector)

Sortuj listy

Kliknij przycisk, aby posortować listę alfabetycznie:

  • Osło
  • Sztokholm
  • Helsinki
  • Berlin
  • Rzym
  • Madryt

Przykład

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

Sortuj tabele

Kliknij nagłówki tabeli, aby odpowiednio posortować tabelę:

Nazwa Kraj
Szybki kubek Berglunda Szwecja
Północ-południe Wielka Brytania
Pudełko do karmienia Alfreda Niemcy
Królewskie jedzenie Niemcy
Zebrane magazyny żywności Włochy
Paryskie specjały Francja
Handel wyspą Wielka Brytania
Roześmiane Piwnice Bachusa Kanada

Przykład

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