САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

КАК СДЕЛАТЬ

Главная

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

ВЕБ САЙТ

Сделать сайтСделать сайт (W3.CSS)Сделать сайт (BS3)Сделать сайт (BS4)Страница по центруРаздел контактаБольшой заголовокПример сайта

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

Конвертер массыКонвертер температурыКонвертер длиныКонвертер скорости

PYTHON

Удалить список дубликатовРеверс строки

Как сделать - Сортировка таблицы



Узнать, как создать сортированную таблицу HTML с помощью JavaScript.


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

Имя Страна
Berglunds snabbkop Швеция
North/South Великобритания
Alfreds Futterkiste Германия
Koniglich Essen Германия
Magazzini Alimentari Riuniti Италия
Париж specialites Франция
Island Trading Великобритания
Laughing Bacchus Winecellars Канада

Редактор кода »


Создание функции сортировки

Пример

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
 switching = true;
  /* Сделайте цикл, который будет продолжаться до тех пор, пока
  никакого переключения не было сделано: */
  while (switching) {
    // Начните с того: переключение не выполняется:
    switching = false;
    rows = table.rows;
    /* Цикл через все строки таблицы (за исключением
    во-первых, который содержит заголовки таблиц): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Начните с того, что не должно быть никакого переключения:
      shouldSwitch = false;
      /* Получите два элемента, которые вы хотите сравнить,
      один из текущей строки и один из следующей: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Проверьте, должны ли две строки поменяться местами:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // Если это так, отметьте как переключатель и разорвать цикл:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Если переключатель был отмечен, сделайте переключатель
      и отметьте, что переключатель был сделан: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
Редактор кода »


Сортировка таблицы по заголовкам

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

Нажмите "Имя", чтобы отсортировать по имени "Страна", чтобы отсортировать по странам.

При первом щелчке направление сортировки будет возрастать (от A до Z).

Щелкните еще раз, и направление сортировки будет нисходящим (от Z до A):

Имя Страна
Berglunds snabbkop Швеция
North/South Великобритания
Alfreds Futterkiste Германия
Koniglich Essen Германия
Magazzini Alimentari Riuniti Италия
Париж specialites Франция
Island Trading Великобритания
Laughing Bacchus Winecellars Канада

Пример

<table id="myTable2">
<tr>
<!-- При нажатии на заголовок запустите функцию sortTable с параметром,
0 для сортировки по именам, 1 для сортировки по стране: -->
<th onclick="sortTable(0)">Имя</th>
<th onclick="sortTable(1)">Страна</th>
</tr>
...

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Сделайте цикл, который будет продолжаться до тех пор, пока
  никакого переключения не было сделано: */
  while (switching) {
    // Начните с того, что скажите: переключение не выполняется:
    switching = false;
    rows = table.rows;
    /* Цикл через все строки таблицы (за исключением
    во-первых, который содержит заголовки таблиц): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Начните с того, что не должно быть никакого переключения:
      shouldSwitch = false;
      /* Получите два элемента, которые вы хотите сравнить,
      один из текущей строки и один из следующей: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Проверьте, должны ли две строки поменяться местами,
      основанный на направлении, asc или desc: */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // Если это так, отметьте как переключатель и разорвать цикл:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Если это так, отметьте как переключатель и разорвать цикл:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Если переключатель был отмечен, сделайте переключатель
      и отметьте, что переключатель был сделан: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Каждый раз, когда выполняется переключение, увеличьте это число на 1:
      switchcount ++;
    } else {
      /* Если переключение не было сделано и направление "asc",
      установите направление на "desc" и снова запустите цикл while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>
Редактор кода »

Сортировка таблицы по числам

Пример

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}
Редактор кода »