Αυτή η ανάρτηση ιστολογίου θα καθορίσει τη διαδικασία φιλτραρίσματος του πίνακα σε JavaScript.
Πώς να φιλτράρετε τον πίνακα σε JavaScript;
Ας δούμε ένα παράδειγμα που εξηγεί πώς να φιλτράρετε έναν πίνακα σε JavaScript.
Παράδειγμα
Πρώτα, δημιουργήστε μια γραμμή αναζήτησης σε ένα έγγραφο HTML με το ' onkeyup ' ακίνητο που καλεί ' filterTableFunc() ' όταν απελευθερωθεί το κλειδί:
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'Αναζήτηση' onkeyup = 'filterTableFunc()' κράτησης θέσης = 'Αναζήτηση.....' >< br >< br >
Δημιουργήστε έναν πίνακα που αποθηκεύει δεδομένα εργαζομένων χρησιμοποιώντας το <πίνακας> ετικέτα και αντιστοιχίστε ένα αναγνωριστικό ' Δεδομένα υπαλλήλου ”:
< id πίνακα = 'δεδομένα εργαζομένων' σύνορο = '1' >
< tr >
< ου > Ονομα ου >
< ου > ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ ου >
< ου > Γένος ου >
< ου > Ονομασία ου >
< ου > Ημερομηνία Εγγραφής ου >
tr >
< tr >
< td > Γιάννης td >
< td > Γιάννης @ gmail. με td >
< td > Αρσενικός td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Στέφανος td >
< td > Στέφανος @ gmail. με td >
< td > Αρσενικός td >
< td > HRM td >
< td > είκοσι ένα / 10 / 2020 td >
tr >
< tr >
< td > Μεγάλο td >
< td > mari78 @ gmail. με td >
< td > Θηλυκός td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Ρόντα td >
< td > rhonda12 @ hotmail. με td >
< td > Αρσενικός td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
τραπέζι >
Μετά την εκτέλεση του αρχείου HTML, η έξοδος θα μοιάζει με αυτό:
Μετά από αυτό, ας προσθέσουμε λειτουργικότητα στον πίνακα φίλτρων. Σε ένα αρχείο σεναρίου JavaScript ή σε μια ετικέτα, χρησιμοποιήστε τον παρακάτω κώδικα που θα φιλτράρει τα δεδομένα του πίνακα με βάση την αναζήτηση:
λειτουργία filterTableFunc ( ) {
ήταν φίλτρο Αποτέλεσμα = έγγραφο. getElementById ( 'Αναζήτηση' ) . αξία . σε πεζά ( ) ;
ήταν empTable = έγγραφο. getElementById ( 'δεδομένα εργαζομένων' ) ;
ήταν tr = empTable. getElementsByTagName ( 'tr' ) ;
Για ( ήταν Εγώ = 1 ; Εγώ < tr. μήκος ; Εγώ ++ ) {
tr [ Εγώ ] . στυλ . απεικόνιση = 'κανένας' ;
συνθ tdArray = tr [ Εγώ ] . getElementsByTagName ( 'td' ) ;
Για ( ήταν ι = 0 ; ι - 1 ) {
tr [ Εγώ ] . στυλ . απεικόνιση = '' ;
Διακοπή ;
}
}
}
}
Στον παραπάνω κωδικό:
- Πρώτα, ορίστε μια συνάρτηση ' filterTableFunc() '.
- Πρόσβαση στη γραμμή αναζήτησης χρησιμοποιώντας το αναγνωριστικό της ' Αναζήτηση ' για να λάβετε την εισαγόμενη τιμή και να τη μετατρέψετε σε πεζά χρησιμοποιώντας το ' toLowerCase() 'μέθοδος.
- Λάβετε μια αναφορά στον πίνακα όπου θα εκτελεστεί η λειτουργία φίλτρου χρησιμοποιώντας το αναγνωριστικό του ' Δεδομένα υπαλλήλου '.
- Στη συνέχεια, λάβετε τις σειρές του πίνακα χρησιμοποιώντας το ' getElementsByTagName 'μέθοδος.
- Επαναλάβετε τον πίνακα μέχρι το μήκος του, λάβετε τα δεδομένα για κάθε καταχώρηση πίνακα και ελέγξτε εάν η αποθηκευμένη τιμή του πίνακα είναι ίση με την τιμή που αναζητήσατε. Εάν είναι, τότε εμφανίστε το.
Παραγωγή
Η παραπάνω έξοδος υποδεικνύει ότι η λειτουργία φίλτρου εφαρμόστηκε με επιτυχία στον πίνακα.
συμπέρασμα
Ένας πίνακας μπορεί να φιλτραριστεί σε JavaScript επαναλαμβάνοντας τα δεδομένα του πίνακα και επιστρέφοντας τα σχετικά δεδομένα. Αυτό το φιλτράρισμα γίνεται μέσω μιας συνάρτησης που καλείται σε ένα συγκεκριμένο συμβάν. Αυτή η προσέγγιση θα λειτουργεί με τέτοιο τρόπο ώστε σε πανομοιότυπα δεδομένα που εισάγονται, να λαμβάνονται τα αντίστοιχα δεδομένα από τον πίνακα, ανεξάρτητα από την ευαισθησία πεζών-κεφαλαίων στο πεδίο κειμένου εισαγωγής. Αυτή η ανάρτηση περιγράφει μια προσέγγιση που μπορεί να χρησιμοποιηθεί για το φιλτράρισμα ενός πίνακα σε JavaScript.