Создание сортируемой таблицы с помощью HTML и JavaScript — это отличный способ улучшить взаимодействие с пользователем на вашем веб-сайте. В этом ответе мы рассмотрим, как можно создать такую таблицу с нуля.
Шаг 1: Создание HTML-структуры таблицы
Первым делом, необходимо создать базовую разметку для нашей таблицы. Ниже приведен пример простой таблицы с заголовками:
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">Имя</th>
<th onclick="sortTable(1)">Возраст</th>
<th onclick="sortTable(2)">Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>30</td>
<td>Москва</td>
</tr>
<tr>
<td>Анна</td>
<td>25</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Петр</td>
<td>35</td>
<td>Казань</td>
</tr>
</tbody>
</table>В этом примере у нас есть таблица с тремя столбцами: Имя, Возраст и Город. Мы добавили обработчик событий onclick к заголовкам, чтобы они вызывали функцию сортировки при нажатии.
Шаг 2: Написание функции JavaScript для сортировки
Теперь нужно написать функцию sortTable, которая будет сортировать строки таблицы. Вот пример реализации:
<script>
function sortTable(columnIndex) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc"; // Устанавливаем направление сортировки по возрастанию
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[columnIndex];
y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
if (dir == "asc") {
if (x.innerHTML > y.innerHTML) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML < y.innerHTML) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++; // Увеличиваем счетчик переключений
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc"; // Меняем направление сортировки на убывание
switching = true;
}
}
}
}
</script>Эта функция выполняет сортировку по выбранному столбцу. Она проверяет, в каком порядке необходимо отсортировать строки, и меняет их местами при необходимости.
Шаг 3: Полный код
Теперь мы можем объединить все вместе. Вот полный код для нашей сортируемой таблицы:
<html>
<head>
<title>Сортируемая таблица</title>
</head>
<body>
<h1>Сортируемая таблица</h1>
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">Имя</th>
<th onclick="sortTable(1)">Возраст</th>
<th onclick="sortTable(2)">Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>30</td>
<td>Москва</td>
</tr>
<tr>
<td>Анна</td>
<td>25</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Петр</td>
<td>35</td>
<td>Казань</td>
</tr>
</tbody>
</table>
<script>
function sortTable(columnIndex) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[columnIndex];
y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
if (dir == "asc") {
if (x.innerHTML > y.innerHTML) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML < y.innerHTML) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
</body>
</html>Теперь у вас есть полная реализация сортируемой таблицы. Вы можете добавить больше данных в таблицу и протестировать сортировку по каждому из столбцов, просто щелкая по заголовкам.
Заключение
Создание сортируемой таблицы с использованием HTML и JavaScript — это полезный навык для веб-разработчиков. Вы можете улучшить функциональность своей таблицы, добавляя фильтры или дополнительные параметры сортировки. Надеюсь, этот урок был для вас полезен!