Shaleych (обсуждение | вклад) мНет описания правки |
Shaleych (обсуждение | вклад) мНет описания правки |
||
Строка 12: | Строка 12: | ||
<style type="text/css"> |
<style type="text/css"> |
||
− | tbody.filter-table-mount tr:last-child{ |
+ | tbody .filter-table-mount tr:last-child{ |
text-align: center; |
text-align: center; |
||
display: none; |
display: none; |
Версия от 17:53, 19 января 2020
<fieldset style="position: sticky; top: 0; z-index: 100;">
<legend>Параметры фильтра таблицы:</legend>
Нижеследующие таблицы можно отфильтровать, используя следующие кнопки. Несколько фильтров могут быть применены сразу, щелкнув несколько кнопок.
<button class="btn" type="button Crescent" value="Ячейка серповидных знаков"><img src="/images/6/61/Серповидный_знак.png" style="width: 50px;"></button> <button class="btn" type="button Enlightened" value="Ячейка просвещенных знаков"><img src="/images/3/3c/Просвещенный_знак.png" style="width: 50px;"></button> <button class="btn" type="button Illuminated" value="Ячейка украшенных знаков"><img src="/images/c/c9/Украшенный_знак.png" style="width: 50px;"></button> <button class="btn" type="button Regal" value="Ячейка царственных знаков"><img src="/images/1/1a/Царственный_знак.png" style="width: 50px;"></button> <button class="btn" type="button Barbed" value="Ячейка шипастых знаков"><img src="/images/5/52/Шипастый_знак.png" style="width: 50px;"></button>
</fieldset>
<style type="text/css"> tbody .filter-table-mount tr:last-child{ text-align: center; display: none;
} tbody.no-results-mount tr:last-child{ display: table-row; } .btn{ color: #f7aa54 !important; border: none !important; background: none !important; margin: 0 !important; padding: 5px !important;
}
.btn.active{ color: #f7aa54 !important; background-color: #341f17 !important; border: none !important; } .btn:focus{ outline: none; }
</style>
<script> document.addEventListener("click", ({target}) => { if(target = target.closest(".btn")) { target.classList.toggle("active"); const show = [...document.querySelectorAll(".btn.active")].map(({value})=> value); const rows = [...document.querySelectorAll("[data-filter]")]. filter((el, i) => { const data = el.dataset.filter.split(", "); console.log(show, data) const hide = show.some(value => !data.includes(value)) el.hidden = hide; return !hide }) document.querySelector(".filter-table-mount tbody").classList.toggle("no-results-mount", !rows.length) } }) </script>