Catatan blog ini akan menentukan proses menapis jadual dalam JavaScript.
Bagaimana untuk Menapis Jadual dalam JavaScript?
Mari lihat contoh yang menerangkan cara menapis jadual dalam JavaScript.
Contoh
Mula-mula, buat bar carian dalam dokumen HTML dengan ' onkeyup ” harta yang memanggil “ filterTableFunc() ” apabila kunci dilepaskan:
< jenis input = 'teks' ID = 'cari' onkeyup = 'filterTableFunc()' pemegang tempat = 'Cari.....' >< br >< br >
Buat jadual yang menyimpan data pekerja menggunakan
< id jadual = 'Data pekerja' sempadan = '1' >
< tr >
< ke > Nama ke >
< ke > E-mel ke >
< ke > Jantina ke >
< ke > Jawatan ke >
< ke > Tarikh Menyertai ke >
tr >
< tr >
< td > John td >
< td > john @ gmail. dengan td >
< td > jantan td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > stephen @ gmail. dengan td >
< td > jantan td >
< td > HRM td >
< td > dua puluh satu / 10 / 2020 td >
tr >
< tr >
< td > Besar td >
< td > mari78 @ gmail. dengan td >
< td > perempuan td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. dengan td >
< td > jantan td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
meja >
Selepas melaksanakan fail HTML, output akan kelihatan seperti ini:
Selepas itu, mari tambahkan fungsi pada jadual penapis. Dalam fail skrip JavaScript atau teg, gunakan kod di bawah yang akan menapis data jadual berdasarkan carian:
fungsi penapisTableFunc ( ) {
adalah filterResult = dokumen. getElementById ( 'cari' ) . nilai . kepadaLowerCase ( ) ;
adalah empTable = dokumen. getElementById ( 'Data pekerja' ) ;
adalah tr = empTable. getElementsByTagName ( 'tr' ) ;
untuk ( adalah i = 1 ; i < tr. panjang ; i ++ ) {
tr [ i ] . gaya . paparan = 'tiada' ;
const tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
untuk ( adalah j = 0 ; j - 1 ) {
tr [ i ] . gaya . paparan = '' ;
rehat ;
}
}
}
}
Dalam kod yang diberikan di atas:
- Pertama, tentukan fungsi ' filterTableFunc() ”.
- Akses bar carian menggunakan idnya ' cari ” untuk mendapatkan nilai yang dimasukkan dan menukarnya kepada huruf kecil menggunakan “ toLowerCase() ” kaedah.
- Dapatkan rujukan kepada jadual di mana operasi penapis akan dilakukan menggunakan id ' data pekerja ”.
- Kemudian, dapatkan baris jadual menggunakan ' getElementsByTagName ” kaedah.
- Lelaran melalui jadual sehingga panjangnya, dapatkan data untuk setiap entri jadual dan semak sama ada nilai yang disimpan bagi jadual adalah sama dengan nilai yang dicari. Jika ya, maka paparkannya.
Pengeluaran
Output di atas menunjukkan bahawa operasi penapis telah berjaya digunakan pada jadual.
Kesimpulan
Jadual boleh ditapis dalam JavaScript dengan mengulangi data jadual dan mengembalikan data yang berkaitan. Penapisan ini dilakukan melalui fungsi yang dipanggil pada acara tertentu. Pendekatan ini akan berfungsi sedemikian rupa sehingga pada data yang sama yang dimasukkan, data yang sepadan daripada jadual diambil, tanpa mengira kepekaan huruf besar dalam medan teks input. Siaran ini menerangkan pendekatan yang boleh digunakan untuk menapis jadual dalam JavaScript.