W3.JS Sort

Sort elements

Sort Lists

Click the button to sort the list alphabetically:

Sort

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

    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>