यह ब्लॉग पोस्ट जावास्क्रिप्ट में टेबल को फ़िल्टर करने की प्रक्रिया को परिभाषित करेगा।
जावास्क्रिप्ट में टेबल को कैसे फ़िल्टर करें?
आइए एक उदाहरण देखें कि जावास्क्रिप्ट में तालिका को कैसे फ़िल्टर किया जाए।
उदाहरण
सबसे पहले, एक HTML दस्तावेज़ में 'के साथ एक खोज बार बनाएं' onkeyup 'संपत्ति जो कॉल करती है' फ़िल्टरटेबलफंक () ' जब कुंजी जारी की जाती है:
< निवेष का प्रकार = 'मूलपाठ' पहचान = 'तलाशी' onkeyup = 'फ़िल्टरटेबलफंक ()' प्लेसहोल्डर = 'खोज.....' < बीआर < बीआर >
एक तालिका बनाएँ जो कर्मचारी डेटा का उपयोग करके संग्रहीत करती है <टेबल> टैग करें, और एक आईडी असाइन करें ' कर्मचारी डेटा ':
< टेबल आईडी = 'कर्मचारी डेटा' सीमा = '1' >
< टीआर >
< वां > नाम वां >
< वां > ईमेल वां >
< वां > लिंग वां >
< वां > पद वां >
< वां > कार्यग्रहण तिथि वां >
टीआर >
< टीआर >
< टीडी > जॉन टीडी >
< टीडी > जॉन @ जीमेल लगीं। साथ टीडी >
< टीडी > पुरुष टीडी >
< टीडी > सीपीए टीडी >
< टीडी > 5 / 5 / 2020 टीडी >
टीआर >
< टीआर >
< टीडी > स्टीफन टीडी >
< टीडी > स्टीफन @ जीमेल लगीं। साथ टीडी >
< टीडी > पुरुष टीडी >
< टीडी > मानव संसाधन विकास मंत्री टीडी >
< टीडी > इक्कीस / 10 / 2020 टीडी >
टीआर >
< टीआर >
< टीडी > बड़ा टीडी >
< टीडी > मारी78 @ जीमेल लगीं। साथ टीडी >
< टीडी > मादा टीडी >
< टीडी > मानव संसाधन विकास मंत्री टीडी >
< टीडी > 16 / 05 / 2022 टीडी >
टीआर >
< टीआर >
< टीडी > रोंडा टीडी >
< टीडी > रोंडा12 @ हॉटमेल। साथ टीडी >
< टीडी > पुरुष टीडी >
< टीडी > सीएफए टीडी >
< टीडी > 23 / 06 / 2022 टीडी >
टीआर >
मेज़ >
HTML फ़ाइल को निष्पादित करने के बाद, आउटपुट इस तरह दिखेगा:
उसके बाद, फ़िल्टर तालिका में कार्यक्षमता जोड़ें। जावास्क्रिप्ट स्क्रिप्ट फ़ाइल या टैग में, नीचे दिए गए कोड का उपयोग करें जो खोज के आधार पर तालिका के डेटा को फ़िल्टर करेगा:
समारोह filterTableFunc ( ) {
था फ़िल्टर परिणाम = दस्तावेज़। getElementById ( 'तलाशी' ) . मूल्य . toLowerCase ( ) ;
था empTable = दस्तावेज़। getElementById ( 'कर्मचारी डेटा' ) ;
था टीआर = empTable. getElementsByTagName ( 'टीआर' ) ;
के लिये ( था मैं = 1 ; मैं < ट्र। लंबाई ; मैं ++ ) {
टीआर [ मैं ] . शैली . दिखाना = 'कोई भी नहीं' ;
स्थिरांक tdArray = टीआर [ मैं ] . getElementsByTagName ( 'टीडी' ) ;
के लिये ( था जे = 0 ; जे - 1 ) {
टीआर [ मैं ] . शैली . दिखाना = '' ;
टूटना ;
}
}
}
}
ऊपर दिए गए कोड में:
- सबसे पहले, एक फ़ंक्शन परिभाषित करें ' फ़िल्टरटेबलफंक () ”।
- इसकी आईडी का उपयोग करके खोज बार तक पहुँचें ” तलाशी 'दर्ज किए गए मान को प्राप्त करने के लिए और' का उपयोग करके इसे लोअरकेस में बदलने के लिए toLowerCase () ' तरीका।
- तालिका का एक संदर्भ प्राप्त करें जहां इसकी आईडी का उपयोग करके फ़िल्टर ऑपरेशन किया जाएगा ' कर्मचारी डेटा ”।
- फिर, 'का उपयोग करके तालिका पंक्तियाँ प्राप्त करें getElementsByTagName ' तरीका।
- तालिका के माध्यम से इसकी लंबाई तक पुनरावृति करें, प्रत्येक तालिका प्रविष्टि के लिए डेटा प्राप्त करें, और जांचें कि क्या तालिका का संग्रहीत मान खोजे गए मान के बराबर है। यदि है तो प्रदर्शित करें।
उत्पादन
उपरोक्त आउटपुट इंगित करता है कि फ़िल्टर ऑपरेशन तालिका में सफलतापूर्वक लागू किया गया है।
निष्कर्ष
तालिका डेटा के माध्यम से पुनरावृति करके और प्रासंगिक डेटा वापस करके एक तालिका को जावास्क्रिप्ट में फ़िल्टर किया जा सकता है। यह फ़िल्टरिंग एक विशिष्ट घटना पर बुलाए गए फ़ंक्शन के माध्यम से की जाती है। यह दृष्टिकोण इस तरह से काम करेगा कि दर्ज किए गए समान डेटा पर, इनपुट टेक्स्ट फ़ील्ड में केस संवेदनशीलता की परवाह किए बिना तालिका से संबंधित डेटा प्राप्त किया जाता है। यह पोस्ट एक दृष्टिकोण का वर्णन करता है जिसका उपयोग जावास्क्रिप्ट में तालिका को फ़िल्टर करने के लिए किया जा सकता है।