Cara menggunakan membuat filter dengan javascript

Bagaimana kita bisa menambahkan opsi pencarian atau filter dalam Tabel HTML menggunakan JavaScript? Solusi: Filter atau Cari Tabel JavaScript, Tambahkan Filter Di Tabel CSS HTML.

Table of Contents Show

Pratinjau Tambahkan Filter Dalam Tabel CSS HTML
Filter Tabel JavaScript atau Kode Sumber Pencarian
Table Filter JavaScript Name Email Phone No ID John Doe 0123456789 01 Alen Fox 0155456789 02 Rakesh Sharma 6754328901 03 Bunty Singh 5678241598 04 Sushant Rajput 675457801 05 Sunny Sharma 675123451 06 Saurav Gupta 61234801 07 Appu Khote 67894561 08 Sandeep Arya 741852963 09 Vijay Mehra 456851982 10

Sebelumnya saya telah membagikan meja responsif desain, Tapi bagaimana kita bisa menambahkan opsi filter di meja . Mungkin Anda telah melihat di beberapa situs web, di mana Anda dapat mencari yang spesifik kondisi di tabel . Seperti jika Anda pernah mengunjungi dasbor backend situs web apa pun, maka Anda mungkin tahu bahwa kami dapat menyaring untuk setiap pengguna dengan menempatkan beberapa kondisi.

Hari ini Anda akan belajar membuat opsi filter untuk tabel HTML menggunakan JavaScript . Dengan menggunakan program ini Anda dapat mencari konten tabel tertentu dengan mencari nama, email, id, dll. Ini adalah program JavaScript pendek & murni untuk filter meja , Anda dapat menggunakan ini di segala jenis meja di mana saja. Anda dapat menggunakan ini pada proyek Anda berikutnya, saya tahu menggunakan jQuery kita bisa membuat fungsi penyaringan lanjutan . Tapi itu untuk menunjukkan bagaimana kita bisa membuat fitur menggunakan JS murni .

Jadi, Hari Ini Saya Berbagi Filter Tabel JavaScript atau Mencari untuk Tabel HTML. Pada dasarnya, Program ini untuk Tambahkan Filter Pada Tabel Berbasis HTML & CSS. saya telah menggunakan Bootstrap untuk membuat tata letak tabel, & menggunakan sedikit CSS untuk penataan. Dalam tabel ini saya telah menambahkan beberapa data, Anda menambahkan lebih banyak sesuai dengan kebutuhan Anda. Atau opsi lain adalah menggunakan kode JS & meletakkannya sendiri meja .

Jika Anda berpikir sekarang bagaimana ini Tabel Filter sebenarnya, Kemudian lihat pratinjau diberikan di bawah.

kesalahan jaringan arena mtg

Pratinjau Tambahkan Filter Dalam Tabel CSS HTML

Lihat pratinjau video ini untuk mendapatkan gambaran tentang bagaimana ini program filter terlihat seperti .

Sekarang Anda dapat melihat ini secara visual. Jika Anda suka ini, dapatkan Kode sumber dari itu.

Anda Mungkin Juga Menyukai:

Filter Portofolio JavaScript
Formulir Multi Langkah
Temukan Teks & Sorotan
Formulir Pendaftaran Buletin Animasi

Filter Tabel JavaScript atau Kode Sumber Pencarian

Sebelum berbagi kode sumber , mari kita bicarakan ini. Seperti yang Anda tahu ini adalah tabel HTML, saya telah menggunakan Bootstrap & CSS ke membuat tata letak . Ini sederhana |_+_| dan |_+_| tabel berbasis. Di bidang filter, saya telah menggunakan atribut pencarian data HTML-* (dapatkan info) & menyortirnya. Dalam file CSS, ditata beberapa elemen seperti heading, table. Seperti yang Anda lihat di pratinjau tabel diwarnai dalam urutan ganjil-genap, Untuk membuatnya saya menggunakan properti CSS :nth-of-type() .

Di bagian JavaScript, saya membuat variabel bernama var TableFilter dan meletakkan semua fungsi di dalamnya. Dalam HTML kami menyimpan data khusus menggunakan elemen Data-*, Sekarang JS mengambilnya menggunakan metode .getAttribute. Sekarang javascript temukan menyaring teks menggunakan fungsi yang disebut function _filter(row) Jika ada data yang cocok dengan input, maka akan ditampilkan.

Saya tahu untuk menjelaskan kode JS secara tertulis diajarkan, Anda akan secara otomatis mengerti setelah mendapatkan kode. Jika Anda memiliki pengetahuan tentang JavaScript maka Anda pasti akan mengerti.

Untuk membuat program ini Anda harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , & ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.

index.html

php menghitung objek dalam array

Buat file HTML bernama ' index.html ' dan letakkan kode-kode ini di bawah ini.

style.css

Sekarang buat file CSS bernama ' style.css ' dan masukkan kode-kode ini.

function.js

Langkah terakhir, Buat file JavaScript bernama ‘ function.js ' dan masukkan kodenya.

 Light Javascript Table Filter Table Filter JavaScript   Name Email Phone No ID    John Doe  0123456789 01   Alen Fox  0155456789 02   Rakesh Sharma  6754328901 03   Bunty Singh  5678241598 04   Sushant Rajput  675457801 05   Sunny Sharma  675123451 06   Saurav Gupta  61234801 07   Appu Khote  67894561 08   Sandeep Arya  741852963 09   Vijay Mehra  456851982 10

Itu dia. Sekarang Anda telah berhasil membuat Filter atau Pencarian Tabel JavaScript. Dengan kata lain, Tambahkan Filter Dalam Tabel CSS HTML. Jika Anda memiliki keraguan atau pertanyaan komentar di bawah.