W3.JS Сортировка HTML


Сортировать элементы:

w3.sortHTML(selector)

Сортировать списки

Нажмите кнопку, чтобы отсортировать список по алфавиту:

  • Осло
  • Стокгольм
  • Хельсинки
  • Берлин
  • Рим
  • Мадрид

Пример

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

Сортировка таблиц

Щелкните заголовки таблицы, чтобы отсортировать таблицу соответствующим образом:

Имя Страна
Быстрая чашка Берглунда Швеция
Север Юг Соединенное Королевство
Кормушка Альфреда Германия
Королевская еда Германия
Собранные продовольственные склады Италия
парижские деликатесы Франция
Островная торговля Соединенное Королевство
Смеющийся Бахус Винные погреба Канада

Пример

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