Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

W3.CSS filtrlar

ULASHISH

HTML elementlarini filtrlash

Biroz JavaScript yordamida W3.CSS jadvallari, ro‘yxatlari, ochiluvchi menyulari va boshqa kontentni filtrlashingiz mumkin.

Quyidagi misollar foydalanuvchi kiritish maydoniga matn yozishi bilan elementlarni filtrlaydi.

Jadvallarni filtrlash

Kiritish maydoniga yozilgan matnga mos kelmaydigan jadval qatorlarini yashirish uchun JavaScript’dan foydalaning:

Misol

Name Country
Alfreds FutterkisteGermany
Berglunds snabbkopSweden
Island TradingUK
Koniglich EssenGermany
Laughing Bacchus WinecellarsCanada
Magazzini Alimentari RiunitiItaly
North/SouthUK
Paris specialitesFrance
O‘zingiz sinab ko‘ring »

Ro‘yxatlarni filtrlash

Xuddi shu usuldan ro‘yxat elementlarini filtrlash uchun ham foydalanish mumkin:

Misol

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy
O‘zingiz sinab ko‘ring »

Ochiluvchi menyularni filtrlash

Ochiluvchi menyu ichidagi havolalarni ham filtrlashingiz mumkin.

JavaScript kiritish maydonidagi matnni o‘qiydi va unga mos kelmaydigan havolalarni yashiradi.

Misol

O‘zingiz sinab ko‘ring » O‘zingiz sinab ko‘ring »

Zamonaviy filtrlash andozasi

Asosiy andoza quyidagicha:

Misol

const filter = input.value.toLowerCase(); items.forEach(item => {   item.style.display =     item.textContent.toLowerCase().includes(filter)     ? "" : "none"; });

includes() metodi matnda qidirilayotgan qiymat bor-yo‘qligini tekshiradi.

textContent xususiyati ko‘rinadigan matnni uni HTML sifatida talqin qilmasdan o‘qiydi.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish