Bu blog gönderisi, tabloyu JavaScript'te filtreleme sürecini tanımlayacaktır.
JavaScript'te Tablo Nasıl Filtrelenir?
JavaScript'te bir tablonun nasıl filtreleneceğini açıklayan bir örnek görelim.
Örnek
İlk olarak, bir HTML belgesinde “ ile bir arama çubuğu oluşturun. onkeyup “” olarak adlandırılan özellik filterTableFunc() ” tuşu bırakıldığında:
< giriş tipi = 'Metin' İD = 'arama' onkeyup = 'filterTableFunc()' Yer tutucu = 'Arama.....' >< br >< br >
kullanarak çalışan verilerini depolayan bir tablo oluşturun.
< tablo kimliği = 'çalışanVerileri' sınır = '1' >
< tr >
< inci > İsim inci >
< inci > E-posta inci >
< inci > Cinsiyet inci >
< inci > atama inci >
< inci > Katılım Tarihi inci >
tr >
< tr >
< td > John td >
< td > John @ gmail. ile birlikte td >
< td > Erkek td >
< td > EBM td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > stefan td >
< td > Stephen @ gmail. ile birlikte td >
< td > Erkek td >
< td > İKY td >
< td > yirmi bir / 10 / 2020 td >
tr >
< tr >
< td > Büyük td >
< td > mari78 @ gmail. ile birlikte td >
< td > Dişi td >
< td > İKY td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > rhonda td >
< td > rhonda12 @ hotmail. ile birlikte td >
< td > Erkek td >
< td > DFA td >
< td > 23 / 06 / 2022 td >
tr >
masa >
HTML dosyasını çalıştırdıktan sonra çıktı şöyle görünecektir:
Ardından filtre tablosuna bir fonksiyon ekleyelim. Bir JavaScript betik dosyasında veya bir etikette, tablonun verilerini aramaya göre filtreleyecek aşağıdaki kodu kullanın:
işlev filtreTableFunc ( ) {
öyleydi filtreSonucu = belge. getElementById ( 'arama' ) . değer . küçük harf ( ) ;
öyleydi empTable = belge. getElementById ( 'çalışanVerileri' ) ;
öyleydi tr = empTable. getElementsByTagName ( 'tr' ) ;
için ( öyleydi i = 1 ; i < tr. uzunluk ; i ++ ) {
tr [ i ] . stil . Görüntüle = 'Yok' ;
sabit td Dizisi = tr [ i ] . getElementsByTagName ( 'td' ) ;
için ( öyleydi j = 0 ; j - 1 ) {
tr [ i ] . stil . Görüntüle = '' ;
kırmak ;
}
}
}
}
Yukarıda verilen kodda:
- İlk olarak, bir işlev tanımlayın ' filterTableFunc() ”.
- Kimliğini kullanarak arama çubuğuna erişin ' arama ” girilen değeri almak ve “ kullanarak küçük harfe dönüştürmek için toLowerCase() ' yöntem.
- Filtreleme işleminin gerçekleştirileceği tablonun kimliği kullanılarak bir referans alın ' çalışanVeri ”.
- Ardından, “ kullanarak tablo satırlarını alın. getElementsByTagName ' yöntem.
- Tabloyu uzunluğuna kadar yineleyin, her tablo girişi için verileri alın ve tablonun saklanan değerinin aranan değere eşit olup olmadığını kontrol edin. Eğer öyleyse, göster.
Çıktı
Yukarıdaki çıktı, filtreleme işleminin tabloya başarıyla uygulandığını gösterir.
Çözüm
Bir tablo, tablo verilerini yineleyerek ve ilgili verileri döndürerek JavaScript'te filtrelenebilir. Bu filtreleme, belirli bir olay üzerine çağrılan bir işlev aracılığıyla yapılır. Bu yaklaşım, girilen özdeş verilerde, giriş metin alanındaki büyük/küçük harf duyarlılığına bakılmaksızın tablodan karşılık gelen verilerin getirileceği şekilde çalışacaktır. Bu gönderi, JavaScript'te bir tabloyu filtrelemek için kullanılabilecek bir yaklaşımı açıklamaktadır.