W3.JS HTML Sıralaması


Öğeleri sırala:

w3.sortHTML(selector)

Listeleri Sırala

Listeyi alfabetik olarak sıralamak için düğmeye tıklayın:

  • oslo
  • Stockholm
  • Helsinki
  • Berlin
  • Roma
  • Madrid

Örnek

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

Tabloları Sırala

Tabloyu buna göre sıralamak için tablo başlıklarına tıklayın:

İsim Ülke
Berglund'un hızlı kupası İsveç
Kuzey Güney Birleşik Krallık
Alfred'in beslenme kutusu Almanya
Kraliyet yemeği Almanya
Toplanan Gıda Depoları İtalya
Paris spesiyalleri Fransa
Ada Ticareti Birleşik Krallık
Gülen Bacchus Şarap Mahzenleri Kanada

Örnek

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