Как сделать - Сортировка таблицы
Узнать, как создать сортированную таблицу 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;
}
Редактор кода »