Shaleych (обсуждение | вклад) мНет описания правки |
Shaleych (обсуждение | вклад) мНет описания правки |
||
(не показано 5 промежуточных версий этого же участника) | |||
Строка 3: | Строка 3: | ||
<p style="margin-bottom: 0.5em;">Нижеследующие таблицы можно отфильтровать, используя следующие кнопки. Несколько фильтров могут быть применены сразу, щелкнув несколько кнопок.</p> |
<p style="margin-bottom: 0.5em;">Нижеследующие таблицы можно отфильтровать, используя следующие кнопки. Несколько фильтров могут быть применены сразу, щелкнув несколько кнопок.</p> |
||
<div class="table-filters" style="display: inline-block !important; border: 1px solid #341f17 !important; padding: 5px !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;"> |
<div class="table-filters" style="display: inline-block !important; border: 1px solid #341f17 !important; padding: 5px !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;"> |
||
− | <button class="btn" type="button Crescent" value="Ячейка серповидных знаков"><img src="/images/6/61/Серповидный_знак.png" style="width: 50px;"></button> |
+ | <button class="btn" type="button Crescent" value="Ячейка серповидных знаков"><img src="https://static.wikia.nocookie.net/neverwinter_ru_gamepedia/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 Enlightened" value="Ячейка просвещенных знаков"><img src="https://static.wikia.nocookie.net/neverwinter_ru_gamepedia/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 Illuminated" value="Ячейка украшенных знаков"><img src="https://static.wikia.nocookie.net/neverwinter_ru_gamepedia/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 Regal" value="Ячейка царственных знаков"><img src="https://static.wikia.nocookie.net/neverwinter_ru_gamepedia/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> |
+ | <button class="btn" type="button Barbed" value="Ячейка шипастых знаков"><img src="https://static.wikia.nocookie.net/neverwinter_ru_gamepedia/images/5/52/Шипастый_знак.png" style="width: 50px;"></button> |
</div> |
</div> |
||
</fieldset> |
</fieldset> |
||
<style type="text/css"> |
<style type="text/css"> |
||
+ | .filter-table-mount tbody tr:last-child{ |
||
+ | text-align: center; |
||
+ | display: none; |
||
+ | |||
+ | } |
||
tbody.no-results-mount tr:last-child{ |
tbody.no-results-mount tr:last-child{ |
||
display: table-row; |
display: table-row; |
Текущая версия от 13:46, 29 апреля 2021
<fieldset style="position: sticky; top: 0; z-index: 100;">
<legend>Параметры фильтра таблицы:</legend>
Нижеследующие таблицы можно отфильтровать, используя следующие кнопки. Несколько фильтров могут быть применены сразу, щелкнув несколько кнопок.
<button class="btn" type="button Crescent" value="Ячейка серповидных знаков"><img src="" style="width: 50px;"></button> <button class="btn" type="button Enlightened" value="Ячейка просвещенных знаков"><img src="" style="width: 50px;"></button> <button class="btn" type="button Illuminated" value="Ячейка украшенных знаков"><img src="" style="width: 50px;"></button> <button class="btn" type="button Regal" value="Ячейка царственных знаков"><img src="" style="width: 50px;"></button> <button class="btn" type="button Barbed" value="Ячейка шипастых знаков"><img src="" style="width: 50px;"></button>
</fieldset>
<style type="text/css"> .filter-table-mount tbody 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>