W3.JS HTML Sort

Sort elements:

w3.sortHTML(selector)

Sort Lists

Click the button to sort the list alphabetically:

Oslo
Stockholm
Helsinki
Berlin
Rome
Madrid

Example

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

Try It Yourself » With CSS »

Sort Tables

Click the table headers to sort the table accordingly:

Name	Country
Berglunds snabbkop	Sweden
North/South	UK
Alfreds Futterkiste	Germany
Koniglich Essen	Germany
Magazzini Alimentari Riuniti	Italy
Paris specialites	France
Island Trading	UK
Laughing Bacchus Winecellars	Canada

Example

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

Try It Yourself » With CSS »

❮ Previous Next ❯