W3.JS HTML řazení


Seřadit prvky:

w3.sortHTML(selector)

Seřadit seznamy

Kliknutím na tlačítko seřadíte seznam podle abecedy:

  • Oslo
  • Stockholm
  • Helsinki
  • Berlín
  • Řím
  • Madrid

Příklad

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

Řazení tabulek

Kliknutím na záhlaví tabulky seřadíte tabulku podle toho:

název Země
Berglundův rychlý pohár Švédsko
Sever jih Spojené království
Alfrédova krabička na krmení Německo
Královské jídlo Německo
Shromážděné potravinové sklady Itálie
Pařížské speciality Francie
Ostrovní obchodování Spojené království
Smějící se Bacchus Vinné sklepy Kanada

Příklad

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