किसी तालिका में सक्रिय वर्ग गणना के साथ एक मॉडल को ट्रिगर करना
आप काम करते समय प्रत्येक सेल की सामग्री के आधार पर कस्टम व्यवहार लागू करना चाह सकते हैं एचटीएमएल टेबल. उदाहरण के लिए, आप तालिका कक्षों में गतिशील रूप से कक्षाएं निर्दिष्ट करने के लिए विशिष्ट पैटर्न या मानदंड का उपयोग कर सकते हैं। परिणामस्वरूप आपकी तालिका अधिक उपयोगी और आकर्षक बन सकती है।
इस उदाहरण में, कुछ आवश्यकताओं को पूरा करने वाली तालिका कोशिकाओं में एक वर्ग का नाम होगा सक्रिय उनमें जोड़ा गया. ए जावास्क्रिप्ट ऐसा करने के लिए फ़ंक्शन का उपयोग किया जाता है जो प्रत्येक सेल की जांच करता है, उसकी सामग्री को सत्यापित करता है, और फिर क्लास को उचित रूप से लागू करता है। यह विशेष कोशिकाओं को उनके डेटा के अनुसार व्यवस्थित करने का एक उत्पादक तरीका है।
लगाने के बाद सक्रिय कक्षों के उपसमूह में वर्ग, इस वर्ग वाले कक्षों की संख्या की गणना करना अगला अगला कदम हो सकता है। यदि आप कोई घटना या कार्रवाई शुरू करना चाहते हैं, जैसे कि एक मोडल खोलना जो गिनती दिखाता है, तो इन कोशिकाओं की गिनती काफी मददगार हो सकती है।
यह ट्यूटोरियल आपको सिखाएगा कि कोशिकाओं की संख्या की गणना करने के लिए जावास्क्रिप्ट का उपयोग कैसे करें सक्रिय क्लास और स्वचालित रूप से एक मोडल लॉन्च करने के लिए जो गिनती दिखाता है। का उपयोग करते हुए jQuery, समाधान सीधा, कुशल और कार्यान्वयन में सरल है।
| आज्ञा | उपयोग का उदाहरण | |
|---|---|---|
| .each() | मिलान किए गए तत्वों के सेट में प्रत्येक तत्व को इस jQuery फ़ंक्शन द्वारा पुनरावृत्त किया जाता है। यह प्रत्येक तालिका सेल पर पुनरावृत्ति करके सशर्त तर्क या कक्षाएं लागू करता है ( | ) in our example. |
| ऐडक्लास() | The selected items receive one or more class names added to them by this jQuery method. The script applies the सक्रिय या कोई नहीं कोशिकाओं को उनकी सामग्री के अनुसार वर्गित करें। | |
| .संवाद() | Used with jQuery UI to generate a modal dialog. When the script triggers the modal, the autoOpen: true option makes sure it opens automatically and shows the number of active items. | |
| ।मूलपाठ() | The text content of the chosen components is retrieved or set using this technique. In this instance, it checks to see if the contents of every | कोशिका एक विशेष पैटर्न से मेल खाती है। |
| RegExp() | इस जावास्क्रिप्ट कंस्ट्रक्टर के साथ नियमित अभिव्यक्तियाँ बनाई जाती हैं। स्क्रिप्ट जैसे पैटर्न की पहचान करके सामग्री के आधार पर कक्षाएं निर्दिष्ट कर सकती है बड़े अक्षरों के बाद संख्याएँ या c के बाद अंक आते हैं. | |
| classList.add() | यह बुनियादी जावास्क्रिप्ट तकनीक एक तत्व को एक विशेष वर्ग देती है। यह वेनिला जावास्क्रिप्ट समाधान में jQuery के addClass() के समान कार्य करता है सक्रिय या कोई नहीं स्थितियों के आधार पर वर्ग. | |
| DOMContentLoaded | जब HTML दस्तावेज़ लोडिंग और पार्सिंग समाप्त कर लेता है, तो DOMContentLoaded ईवेंट ट्रिगर हो जाता है। वेनिला जावास्क्रिप्ट उदाहरण में, यह सुनिश्चित करता है कि DOM लोड होने के बाद स्क्रिप्ट निष्पादित हो। | |
| querySelectorAll() | दस्तावेज़ में प्रत्येक तत्व जो दिए गए सीएसएस चयनकर्ता से मेल खाता है, इस जावास्क्रिप्ट फ़ंक्शन द्वारा वापस कर दिया जाता है। मूल जावास्क्रिप्ट उदाहरण में, इसका उपयोग प्रत्येक को चुनने के लिए किया जाता है | element in the table for further processing. |
| प्रत्येक के लिए() | An array method in JavaScript that lets you iterate over elements. Here, it's utilized to iterate over every table cell that querySelectorAll() returned and apply the required logic to each one. |
स्क्रिप्ट को समझना: कोशिकाओं की गिनती करना और एक मॉडल को ट्रिगर करना
पहले स्क्रिप्ट उदाहरण में, प्रत्येक तालिका सेल को पुनरावृत्त किया जाता है, इसकी सामग्री का मूल्यांकन किया जाता है, और मूल्यांकन के आधार पर एक वर्ग आवंटित किया जाता है jQuery. यह सुविधा प्रत्येक के माध्यम से पुनरावृत्त करके संभव बनाई गई है
साथ रेगएक्सपी() कंस्ट्रक्टर, अक्षरों के बाद मिलान संख्याओं के लिए एक नियमित अभिव्यक्ति का निर्माण किया जाता है। यह तकनीक सुनिश्चित करती है कि डेटा वाले सेल, जैसे "1ए" या "3सी", को वर्तमान वर्ग के साथ पहचाना और लेबल किया गया है। सेल को एक अलग वर्ग प्राप्त होता है जिसे कहा जाता है कोई नहीं यदि सामग्री किसी भिन्न पैटर्न से मेल खाती है, तो "सी" के बाद एक संख्या आती है। इससे तालिका में डेटा को अधिक सटीक रूप से वर्गीकृत करना संभव हो जाता है। इसके अलावा, ऐडक्लास() विधि यह गारंटी देती है कि कोशिकाओं में पहले से मौजूद किसी भी वर्ग को हटाए बिना इन वर्गों को जोड़ा जा सकता है।
अगला कदम उपयुक्त कोशिकाओं की गिनती करना और उन सभी को सक्रिय वर्ग के साथ टैग करने के बाद एक मोडल शुरू करना है। हर बार जब कोई सेल सक्रिय वर्ग प्राप्त करता है, तो गिनती बढ़ जाती है और नामित चर में सहेजी जाती है सक्रियगणना. इस गणना का उपयोग करके तालिका में योग्य कोशिकाओं की संख्या सुनिश्चित की जानी चाहिए। का उपयोग .संवाद() jQuery UI से फ़ंक्शन, गिनती समाप्त होने पर एक मोडल उत्पन्न होता है। स्वतः खोलें: सत्य विशेषता मोडल को स्वचालित रूप से खोलने की अनुमति देती है। सक्रिय कोशिकाओं की संख्या को मोडल के अंदर दिखाया गया है।
दूसरे मामले में, समान प्रक्रिया की नकल करने के लिए वेनिला जावास्क्रिप्ट का उपयोग किया जाता है। querySelectorAll() सभी तालिका कक्षों का चयन करने के लिए इस दृष्टिकोण में jQuery के स्थान पर उपयोग किया जाता है, और एक सीधा प्रत्येक के लिए() लूप प्रत्येक कोशिका के माध्यम से पुनरावृत्त होता है। सेल सामग्री से मिलान करने के लिए रेगुलर एक्सप्रेशन का उपयोग किया जाता है, ठीक jQuery समाधान की तरह। यदि कोई मिलान खोजा जाता है, तो सक्रिय गणना अद्यतन की जाती है और सक्रिय वर्ग का उपयोग करके जोड़ा जाता है क्लासलिस्ट.जोड़ें() तरीका। अंततः, DOM में पूर्वनिर्धारित मोडल तत्व के आंतरिक HTML को बदलने से मोडल सक्रिय हो जाता है। इस समाधान का उपयोग करके jQuery उदाहरण के समान परिणाम प्राप्त किया जाता है, जो बाहरी पुस्तकालयों पर निर्भर नहीं होता है।
एक विशिष्ट वर्ग के साथ कोशिकाओं की गिनती करना और एक मॉडल को ट्रिगर करना
यह विधि उन वस्तुओं की गणना करती है जिनमें एक निश्चित वर्ग होता है और गतिशील रूप से उनका उपयोग करके वर्ग निर्दिष्ट करता है jQuery. इसके बाद यह एक मोडल विंडो खोलता है।
$(document).ready(function() {var activeCount = 0;$('td').each(function() {var $this = $(this);if ($this.text().match(new RegExp(/[0-9][A-Z]/)) !== null) {$this.addClass('active');activeCount++;}if ($this.text().match(new RegExp(/c[0-9]/)) !== null) {$this.addClass('none');}});// Trigger the modal with the count of 'active' items$('#myModal').dialog({ autoOpen: true, modal: true, title: 'Active Count',open: function() { $(this).html('Number of active items: ' + activeCount); } });});
वैकल्पिक: सक्रिय कोशिकाओं की गणना करने के लिए वेनिला जावास्क्रिप्ट का उपयोग करना
jQuery जैसी तृतीय-पक्ष लाइब्रेरी पर निर्भर रहने के बजाय, यह समाधान एक वर्ग जोड़ता है और उपयोग करने वाली कोशिकाओं की गणना करता है शुद्ध जावास्क्रिप्ट.
document.addEventListener('DOMContentLoaded', function() {var cells = document.querySelectorAll('td');var activeCount = 0;cells.forEach(function(cell) {if (/[0-9][A-Z]/.test(cell.textContent)) {cell.classList.add('active');activeCount++;} else if (/c[0-9]/.test(cell.textContent)) {cell.classList.add('none');}});// Open the modal to display the countvar modal = document.getElementById('myModal');modal.style.display = 'block';modal.innerHTML = 'Number of active items: ' + activeCount;});
बैकएंड दृष्टिकोण: ईजेएस टेम्प्लेटिंग के साथ नोड.जेएस और एक्सप्रेस का उपयोग करना
यह नोड.जे.एस उदाहरण का उपयोग करता है ईजेएस टेम्प्लेटिंग सर्वर-साइड कोशिकाओं की गिनती करते समय एक मोडल विंडो में सेल गिनती प्रस्तुत करना।
const express = require('express');const app = express();app.set('view engine', 'ejs');app.get('/', (req, res) => {const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];let activeCount = 0;tableData.forEach(row => {row.forEach(cell => {if (/[0-9][A-Z]/.test(cell)) {activeCount++;}});});res.render('index', { activeCount });});app.listen(3000, () => console.log('Server running on port 3000'));
बैकएंड समाधान के लिए जेस्ट के साथ यूनिट परीक्षण
यहां, हम Node.js समाधान का उपयोग करके इकाई परीक्षण विकसित करते हैं जेस्ट यह सुनिश्चित करने के लिए कि सक्रिय गिनती तर्क इच्छानुसार कार्य करे।
const { countActiveCells } = require('./countActive');test('counts active cells correctly', () => {const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];expect(countActiveCells(tableData)).toBe(4);});test('returns zero if no active cells', () => {const tableData = [['c1', 'c2', 'c3'], ['c4', 'c5', 'c6']];expect(countActiveCells(tableData)).toBe(0);});
जावास्क्रिप्ट में सेल चयन और क्लास हैंडलिंग पर विस्तार
के साथ काम करना जावास्क्रिप्ट और एचटीएमएल टेबल इसमें उपयोगकर्ता इनपुट या सामग्री के जवाब में कक्षाओं को गतिशील रूप से संशोधित करने की क्षमता भी शामिल है। आप कोशिकाओं को गिनने के अलावा और भी बहुत कुछ कर सकते हैं; आप उपयोगकर्ता इनपुट को भी संभाल सकते हैं और तालिका की सामग्री को तुरंत बदल सकते हैं। उदाहरण के लिए, जैसे तरीकों का उपयोग करना removeClass() jQuery में या classList.remove() वेनिला जावास्क्रिप्ट में, जब कोई उपयोगकर्ता टेबल सेल पर क्लिक करता है तो आप क्लास को गतिशील रूप से संशोधित कर सकते हैं, हाइलाइट कर सकते हैं या क्लास को हटा भी सकते हैं। परिणामस्वरूप तालिकाएँ काफी अधिक इंटरैक्टिव हो जाती हैं, और वास्तविक समय में सामग्री के अपडेट के आधार पर आगे अनुकूलन संभव है।
वास्तविक समय डेटा प्रदर्शित करने वाली एक तालिका जहां वर्ग परिवर्तन के आधार पर विशिष्ट कोशिकाओं को दृष्टिगत रूप से अलग करने की आवश्यकता होती है, इसके लिए एक उपयोगी उपयोग मामला होगा। इवेंट श्रोताओं का उपयोग करके उन फ़ंक्शंस को बाइंड करना आसान है जो इन संशोधनों का कारण बनते हैं। उदाहरण के लिए, जावास्क्रिप्ट में, आप इसका उपयोग कर सकते हैं addEventListener() विशेष सेल पर घटनाओं को सुनने के लिए, जैसे क्लिक या कुंजी दबाना। अतिरिक्त वर्ग संशोधन या यहां तक कि संख्या को प्रतिबिंबित करने वाले काउंटर पर अपडेट भी सक्रिय तालिका की कोशिकाएँ इस अंतःक्रिया के परिणामस्वरूप हो सकती हैं।
आप उन स्थितियों के बारे में भी सोच सकते हैं जिनमें सेल को उपयोगकर्ता के किसी भी इनपुट के बिना स्वचालित रूप से अपडेट होना चाहिए। तालिका सामग्री को अंतराल या AJAX कॉल के माध्यम से लगातार अद्यतन और मॉनिटर किया जा सकता है। नियमित अभिव्यक्ति और विधियाँ जैसे setInterval() तालिका को स्वचालित रूप से अपनी कक्षाएं बदलने और सीमा तक पहुंचने पर एक मोडल लॉन्च करने की अनुमति दें। तालिकाओं का उपयोग अब डैशबोर्ड और डेटा-संचालित सेटिंग्स जैसे अधिक गतिशील अनुप्रयोगों में किया जा सकता है।
जावास्क्रिप्ट क्लास हैंडलिंग और सेल काउंटिंग से संबंधित अक्सर पूछे जाने वाले प्रश्न
- वेनिला जावास्क्रिप्ट में, मैं उन घटकों की गिनती कैसे कर सकता हूँ जो किसी विशेष वर्ग से संबंधित हैं?
- उस वर्ग के प्रत्येक तत्व का चयन करने के लिए, उपयोग करें document.querySelectorAll('.className'); उन्हें गिनने के लिए, उपयोग करें length.
- तालिका सेल की सामग्री के आधार पर, मैं इसमें एक क्लास कैसे जोड़ सकता हूँ?
- आप इसका उपयोग करके कक्षा लागू कर सकते हैं classList.add() और का उपयोग करके सेल की सामग्री का निरीक्षण करें textContent या innerText गुण।
- क्या फर्क पड़ता है text() वेनिला जावास्क्रिप्ट में से textContent jQuery में?
- textContent एक मूल जावास्क्रिप्ट संपत्ति है, और text() एक jQuery विधि है जो चयनित तत्वों की सामग्री को पुनर्प्राप्त या संशोधित करती है।
- किसी विशेष वर्ग से संबंधित कोशिकाओं की गिनती करते समय, मैं एक मोडल कैसे शुरू कर सकता हूं?
- JQuery में एक मोडल बनाने के लिए और इसे किसी विशेष वर्ग के आइटमों की संख्या पर निर्भर ट्रिगर करने के लिए, उपयोग करें .dialog().
- जावास्क्रिप्ट में, मैं किसी तत्व से कक्षा कैसे ले सकता हूँ?
- वेनिला जावास्क्रिप्ट में, आप उपयोग कर सकते हैं classList.remove('className') किसी तत्व से किसी वर्ग को हटाने के लिए।
सेल गिनती और मॉडल्स पर अंतिम विचार
जावास्क्रिप्ट या jQuery का उपयोग किसी निर्दिष्ट वर्ग के साथ कोशिकाओं की गिनती को प्रबंधित करने के लिए किया जा सकता है सक्रिय, प्रभावी तरीके से. नियमित अभिव्यक्ति तालिका सामग्री में पैटर्न की पहचान करने के लिए एक उपयोगी उपकरण है, जो गतिशील कक्षा असाइनमेंट और अन्य इंटरैक्शन की सुविधा प्रदान करती है।
इसके अलावा, उपयोगकर्ताओं को तालिका की स्थिति के बारे में सूचित करने का एक उपयोगी तरीका इन सक्रिय कोशिकाओं की संख्या के आधार पर एक मोडल शुरू करना है। .संवाद() jQuery में फ़ंक्शन या एक कस्टम मोडल दो विधियां हैं जो तालिका सामग्री को संभालने के मामले में काफी बहुमुखी प्रतिभा प्रदान करती हैं।
स्रोत और सन्दर्भ
- जावास्क्रिप्ट और jQuery का उपयोग करके कक्षाओं को गतिशील रूप से जोड़ने और सामग्री को संभालने की जानकारी यहां उपलब्ध विस्तृत गाइड से प्राप्त की गई थी jQuery एपीआई दस्तावेज़ीकरण .
- सामग्री में हेरफेर करने के लिए जावास्क्रिप्ट में नियमित अभिव्यक्तियों का उपयोग करने की अंतर्दृष्टि यहां पाए गए दस्तावेज़ से संदर्भित की गई थी एमडीएन वेब डॉक्स .
- JQuery UI डायलॉग विधि का उपयोग करके मॉडल निर्माण और इसके विस्तृत उपयोग का पता लगाया जा सकता है jQuery यूआई संवाद दस्तावेज़ीकरण .
- जावास्क्रिप्ट में विशिष्ट वर्गों के साथ तत्वों की गिनती के महत्व और व्यावहारिक उदाहरणों की समीक्षा जैसे लेखों में की जा सकती है फ्रीकोडकैम्प जावास्क्रिप्ट गाइड .