HTML - JS - несколько кнопок, которые меняют css столбцов таблицы
У меня есть HTML-документ с таблицей в нем
<table>
<tr>
<th class = "street">Street</th>
<th class = "city">City</th>
<th class = "country">Country</th>
</tr>
<tr>
<td class = "street">street-1</td>
<td class = "city">city-1</td>
<td class = "country">country-1</td>
</tr>
<tr>
<td class = "street">street-2</td>
<td class = "city">city-2</td>
<td class = "country">country-2</td>
</tr>
</table>
Сейчас ищу способ реализовать кнопки. Например
<button id = "button_street">TOGGLE STREET</button>
<button id = "button_city">TOGGLE CITY</button>
<button id = "button_country">TOGGLE COUNTRY</button>
При нажатии кнопки соответствующий столбец в таблице должен быть скрыт. Еще лучше (чем скрытый) было бы, если бы я мог изменить дизайн css с помощью кнопок.
Мое (временное) решение довольно громоздко... Это решение javascript, которое изменяет один класс (видимый) на другой (скрытый).
Spry.Utils.addLoadListener(function() {
let buttonToggle = document.getElementById('button_street');
buttonToggle.addEventListener('click', toggleClass);
function toggleClass() {
let collection = document.getElementsByClassName("street");
for (var i=0; i<collection.length; i++) {
collection[i].classList.toggle('street_design2');
}
}
}
Этот javascript должен быть повторен для каждой кнопки.
где css следующий:
.street {
background-color: blue;
}
.street_design2 {
background-color: red;
}
Если я хочу скрыть «улицу-колонну», я могу использовать display: none
- Я не нашел другого решения javascript для обращения ко всем элементам с улицей класса. Может быть, есть лучшее решение?
- также было бы хорошо, если бы я мог передать функцию в такой массив:
const array = ["street", "city", "country"]
вместо того, чтобы повторять это для каждой кнопки. Может есть решение (петля?)?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать document.querySelectorAll для обращения ко всем элементам с одинаковым именем тега, классом и т. д., а затем использовать .forEach() для добавления EventListener ко всем элементам сразу для вашего случая.
function toggleClass(collection) {
document.querySelectorAll('.' + collection).forEach(function(element) {
element.classList.toggle(collection + '_design2');
});
}
document.querySelectorAll('button').forEach(function(button) {
button.addEventListener('click', function(e) {
let collection = this.id.split('_').pop();
toggleClass(collection);
});
});.street {
background-color: blue;
}
.street_design2 {
background-color: red;
}
.city_design2 {
background-color: yellow;
}
.country_design2 {
background-color: green;
}<table>
<tr>
<th class = "street">Street</th>
<th class = "city">City</th>
<th class = "country">Country</th>
</tr>
<tr>
<td class = "street">street-1</td>
<td class = "city">city-1</td>
<td class = "country">country-1</td>
</tr>
<tr>
<td class = "street">street-2</td>
<td class = "city">city-2</td>
<td class = "country">country-2</td>
</tr>
</table>
<button id = "button_street">TOGGLE STREET</button>
<button id = "button_city">TOGGLE CITY</button>
<button id = "button_country">TOGGLE COUNTRY</button>Вы можете использовать свойство данных, чтобы указать, какой узел является целевым. Это поможет избежать конфликтов имен в будущем, а также обратный вызов будет выполняться только для конкретной кнопки, для которой указано свойство data-table-toggle, чтобы избежать конфликтов с другими кнопками.
Код добавит прослушиватель событий ко всем кнопкам на веб-странице, которые имеют настраиваемый атрибут данных «data-table-toggle». Когда пользователь нажимает на одну из этих кнопок, выполняется функция tableToggle().
Функция tableToggle() сначала извлекает значение атрибута data-table-toggle нажатой кнопки, используя this.getAttribute("data-table-toggle"). Затем он использует это значение для выбора всех строк таблицы, атрибут class которых соответствует значению атрибута data-table-toggle. Это делается с помощью метода document.querySelectorAll() со строкой селектора CSS, которая нацелена на все элементы, у которых есть дочерний элемент с указанным классом.
Наконец, функция переключает класс каждой выбранной строки таблицы между двумя разными стилями: исходный класс, связанный со значением атрибута «data-table-toggle», и новый класс с добавленным к нему «-_design2». Это делается с помощью метода classList.toggle().
В целом, этот код динамически изменяет стили строк таблицы в зависимости от нажатия кнопки, обеспечивая простой эффект переключения.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js" integrity = "sha512-NCiXRSV460cHD9ClGDrTbTaw0muWUBf/zB/yLzJavRsPNUl9ODkUVmUHsZtKu17XknhsGlmyVoJxLg/ZQQEeGA= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "script.js"></script>
<style>
table .street-_design2 {
display:none;
}
table .city-_design2 {
display:none;
}
table .country-_design2 {
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<th class = "street">Street</th>
<th class = "city">City</th>
<th class = "country">Country</th>
</tr>
<tr>
<td class = "street">street-1</td>
<td class = "city">city-1</td>
<td class = "country">country-1</td>
</tr>
<tr>
<td class = "street">street-2</td>
<td class = "city">city-2</td>
<td class = "country">country-2</td>
</tr>
</table>
<button data-table-toggle = "street">TOGGLE STREET</button>
<button data-table-toggle = "city">TOGGLE CITY</button>
<button data-table-toggle = "country">TOGGLE COUNTRY</button>
</body>
window.onload = function () {
Array.from(document.querySelectorAll("button")).forEach(function (element) {
if (!element.getAttribute("data-table-toggle")) return;
element.addEventListener('click', tableToggle);
});
function tableToggle() {
const attribute = this.getAttribute("data-table-toggle");
Array.from(document.querySelectorAll(`tr .${attribute}`)).forEach(function (selector) {
selector.classList.toggle(`${attribute}-_design2`);
})
}
};