टेबलमध्ये सक्रिय वर्ग गणनेसह मॉडेल ट्रिगर करणे
तुम्ही काम करताना प्रत्येक सेलच्या सामग्रीवर आधारित सानुकूल वर्तन लागू करू शकता HTML सारण्या. उदाहरणार्थ, टेबल सेलवर डायनॅमिकपणे वर्ग नियुक्त करण्यासाठी तुम्ही विशिष्ट पॅटर्न किंवा निकष वापरू शकता. परिणामी तुमचे टेबल अधिक उपयुक्त आणि आकर्षक होऊ शकते.
या उदाहरणात, विशिष्ट आवश्यकता पूर्ण करणाऱ्या सारणी पेशींना नावाचा वर्ग असेल सक्रिय त्यांना जोडले. ए JavaScript फंक्शन जे प्रत्येक सेलचे परीक्षण करते, त्यातील सामग्री सत्यापित करते आणि नंतर योग्यरित्या वर्ग लागू करते ते हे करण्यासाठी वापरले जाते. विशिष्ट पेशी त्यांच्या डेटानुसार आयोजित करण्याची ही एक उत्पादक पद्धत आहे.
अर्ज केल्यानंतर सक्रिय सेलच्या उपसंचासाठी वर्ग, हा वर्ग असलेल्या पेशींची संख्या मोजणे ही वारंवार पुढील पायरी असू शकते. तुम्हाला एखादा कार्यक्रम किंवा कृती सुरू करण्याची इच्छा असल्यास, मोजणी दाखवणारे मॉडेल उघडणे, या सेलची मोजणी करणे खूप उपयुक्त ठरू शकते.
हे ट्यूटोरियल तुम्हाला ज्या सेलची संख्या मोजण्यासाठी JavaScript कसे वापरायचे ते शिकवेल सक्रिय वर्ग आणि स्वयंचलितपणे एक मॉडेल लॉन्च करण्यासाठी जे संख्या दर्शवते. वापरत आहे jQuery, उपाय सरळ, कार्यक्षम आणि अंमलबजावणीसाठी सोपे आहे.
| आज्ञा | वापराचे उदाहरण | |
|---|---|---|
| .each() | जुळलेल्या घटकांच्या संचामधील प्रत्येक घटक या jQuery फंक्शनद्वारे पुनरावृत्ती केला जातो. हे प्रत्येक टेबल सेलवर पुनरावृत्ती करून सशर्त तर्कशास्त्र किंवा वर्ग लागू करते ( | ) in our example. |
| addClass() | The selected items receive one or more class names added to them by this jQuery method. The script applies the सक्रिय किंवा काहीही नाही त्यांच्या सामग्रीनुसार पेशींचा वर्ग. | |
| .dialog() | 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. | |
| .text() | 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() | या JavaScript कन्स्ट्रक्टरसह रेग्युलर एक्सप्रेशन तयार केले जातात. स्क्रिप्ट नमुने ओळखून सामग्रीवर आधारित वर्ग नियुक्त करू शकते जसे की मोठ्या अक्षरांनंतर संख्या किंवा c त्यानंतर अंक. | |
| classList.add() | हे मूलभूत JavaScript तंत्र एखाद्या घटकाला विशिष्ट वर्ग देते. हे व्हॅनिला JavaScript सोल्यूशनमध्ये jQuery च्या addClass() प्रमाणेच कार्य करते, जोडून सक्रिय किंवा काहीही नाही परिस्थितीनुसार वर्ग. | |
| DOMContentLoaded | HTML दस्तऐवजाचे लोडिंग आणि पार्सिंग पूर्ण झाल्यावर, DOMContentLoaded इव्हेंट ट्रिगर केला जातो. व्हॅनिला JavaScript उदाहरणामध्ये, DOM लोडिंग पूर्ण झाल्यानंतर स्क्रिप्ट कार्यान्वित होईल याची खात्री करते. | |
| querySelectorAll() | दिलेल्या CSS सिलेक्टरशी जुळणारा डॉक्युमेंटमधील प्रत्येक घटक या JavaScript फंक्शनद्वारे परत केला जातो. मूलभूत JavaScript उदाहरणामध्ये, ते प्रत्येक निवडण्यासाठी वापरले जाते | 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. हे वैशिष्ट्य प्रत्येकाद्वारे पुनरावृत्ती करून शक्य झाले आहे
सह RegExp() constructor, जुळणाऱ्या संख्यांसाठी एक नियमित अभिव्यक्ती त्यानंतर अक्षरे तयार केली जातात. हे तंत्र सुनिश्चित करते की डेटा असलेल्या सेल, जसे की "1A" किंवा "3C" ओळखले जातात आणि वर्तमान वर्गासह लेबल केले जातात. सेलला वेगळा वर्ग प्राप्त होतो काहीही नाही जर सामग्री वेगळ्या पॅटर्नशी जुळत असेल, तर अशा "c" नंतर एक संख्या. हे टेबलमधील डेटाचे अधिक अचूकपणे वर्गीकरण करणे शक्य करते. शिवाय, द addClass() पद्धत हमी देते की सेलमध्ये आधीपासून असलेले कोणतेही वर्ग न हटवता हे वर्ग जोडले जाऊ शकतात.
पुढील पायरी म्हणजे योग्य पेशींची गणना करणे आणि ते सर्व सक्रिय वर्गासह टॅग केल्यानंतर एक मॉडेल सुरू करणे. प्रत्येक वेळी जेव्हा सेल सक्रिय वर्ग प्राप्त करतो, तेव्हा संख्या वाढविली जाते आणि नावाच्या व्हेरिएबलमध्ये जतन केली जाते. सक्रिय गणना. या गणनेचा वापर करून टेबलमधील पात्र सेलची संख्या निश्चित करणे आवश्यक आहे. वापरून .dialog() jQuery UI मधील कार्य, मोजणी पूर्ण झाल्यावर एक मॉडेल तयार केले जाते. द स्वयं उघडा: खरे विशेषता मॉडेलला स्वयंचलितपणे उघडण्यास अनुमती देते. सक्रिय पेशींची संख्या मॉडेलमध्ये दर्शविली जाते.
दुसऱ्या प्रकरणात, व्हॅनिला JavaScript समान प्रक्रियेची डुप्लिकेट करण्यासाठी वापरली जाते. querySelectorAll() सर्व टेबल सेल निवडण्यासाठी या दृष्टिकोनामध्ये jQuery च्या जागी वापरला जातो आणि एक सरळ प्रत्येकासाठी() लूप प्रत्येक सेलमधून पुनरावृत्ती होते. jQuery सोल्यूशन प्रमाणेच सेल सामग्रीशी जुळण्यासाठी रेग्युलर एक्सप्रेशन्सचा वापर केला जातो. जुळणी आढळल्यास, सक्रिय गणना अद्यतनित केली जाते आणि वापरून सक्रिय वर्ग जोडला जातो classList.add() पद्धत शेवटी, 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); } });});
पर्यायी: सक्रिय पेशी मोजण्यासाठी व्हॅनिला JavaScript वापरणे
jQuery सारख्या तृतीय-पक्षाच्या लायब्ररीवर अवलंबून राहण्याऐवजी, हे समाधान वर्ग जोडते आणि सेलची गणना करते शुद्ध JavaScript.
१बॅकएंड ॲप्रोच: EJS टेम्प्लेटिंगसह Node.js आणि एक्सप्रेस वापरणे
या Node.js उदाहरण वापरते ईजेएस टेम्प्लेटिंग सेल सर्व्हर-साइड मोजताना मॉडेल विंडोमध्ये सेलची संख्या रेंडर करण्यासाठी.
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);});
जावास्क्रिप्टमध्ये सेल सिलेक्शन आणि क्लास हँडलिंग वर विस्तार करणे
सोबत काम करत आहे JavaScript आणि HTML सारण्या वापरकर्ता इनपुट किंवा सामग्रीच्या प्रतिसादात वर्ग गतिशीलपणे सुधारण्याची क्षमता देखील समाविष्ट आहे. आपण फक्त पेशी मोजण्यापेक्षा बरेच काही करू शकता; तुम्ही वापरकर्ता इनपुट देखील हाताळू शकता आणि टेबलची सामग्री त्वरित बदलू शकता. उदाहरणार्थ, पद्धती वापरणे removeClass() jQuery मध्ये किंवा १ व्हॅनिला JavaScript मध्ये, जेव्हा वापरकर्ता टेबल सेलवर क्लिक करतो तेव्हा तुम्ही क्लास डायनॅमिकरित्या बदलू शकता, हायलाइट करू शकता किंवा क्लास काढून टाकू शकता. परिणामी सारण्या अधिक परस्परसंवादी बनतात आणि रिअल टाइममध्ये सामग्रीच्या अद्यतनांवर आधारित पुढील सानुकूलन शक्य आहे.
रीअल-टाइम डेटा प्रदर्शित करणारी सारणी ज्यामध्ये वर्ग बदलानुसार विशिष्ट सेल दृष्यदृष्ट्या विभक्त करणे आवश्यक आहे, यासाठी उपयुक्त वापर केस असेल. इव्हेंट श्रोते वापरून हे बदल घडवून आणणारी फंक्शन्स बांधणे सोपे आहे. JavaScript मध्ये, उदाहरणार्थ, तुम्ही वापरू शकता addEventListener() विशिष्ट सेलवरील कार्यक्रम ऐकण्यासाठी, जसे की क्लिक किंवा की दाबणे. ची संख्या प्रतिबिंबित करणाऱ्या काउंटरवर अतिरिक्त वर्ग बदल किंवा अगदी अद्यतने सक्रिय टेबलमधील पेशी या परस्परसंवादाचा परिणाम होऊ शकतात.
वापरकर्त्याच्या कोणत्याही इनपुटशिवाय सेल आपोआप अपडेट व्हाव्यात अशा परिस्थितींबद्दल देखील तुम्ही विचार करू शकता. टेबल सामग्री अद्ययावत केली जाऊ शकते आणि मध्यांतर किंवा AJAX कॉलद्वारे सतत परीक्षण केले जाऊ शकते. नियमित अभिव्यक्ती आणि पद्धती जसे की setInterval() टेबलला त्याचे वर्ग आपोआप बदलण्याची परवानगी द्या आणि थ्रेशोल्ड गाठल्यावर मॉडेल लाँच करा. टेबल्स आता अधिक डायनॅमिक ॲप्लिकेशन्समध्ये वापरल्या जाऊ शकतात, जसे की डॅशबोर्ड आणि डेटा-चालित सेटिंग्ज.
JavaScript क्लास हँडलिंग आणि सेल काउंटिंग संबंधी वारंवार विचारले जाणारे प्रश्न
- व्हॅनिला JavaScript मध्ये, मी विशिष्ट वर्गाशी संबंधित घटक कसे मोजू शकतो?
- त्या वर्गासह प्रत्येक घटक निवडण्यासाठी, वापरा document.querySelectorAll('.className'); त्यांना मोजण्यासाठी, वापरा ५.
- टेबल सेलच्या सामग्रीवर आधारित, मी त्यात वर्ग कसा जोडू शकतो?
- तुम्ही वापरून वर्ग लागू करू शकता classList.add() आणि वापरून सेलमधील सामग्रीची तपासणी करा ७ किंवा innerText गुणधर्म
- काय वेगळे करतो ९ पासून व्हॅनिला JavaScript मध्ये ७ jQuery मध्ये?
- ७ मूळ JavaScript मालमत्ता आहे, आणि ९ ही एक jQuery पद्धत आहे जी निवडलेल्या घटकांची सामग्री पुनर्प्राप्त किंवा सुधारित करते.
- विशिष्ट वर्गाशी संबंधित पेशींची गणना करताना, मी एक मॉडेल कसे सुरू करू शकतो?
- jQuery मध्ये एक मॉडेल तयार करण्यासाठी आणि त्यास विशिष्ट वर्गातील आयटमच्या संख्येवर अवलंबून ट्रिगर करण्यासाठी, वापरा .dialog().
- JavaScript मध्ये, मी घटकामधून वर्ग कसा घेऊ शकतो?
- व्हॅनिला JavaScript मध्ये, तुम्ही वापरू शकता classList.remove('className') घटकातून वर्ग काढण्यासाठी.
सेल मोजणी आणि मॉडेल्सवरील अंतिम विचार
JavaScript किंवा jQuery चा वापर विशिष्ट वर्गासह सेल मोजणी व्यवस्थापित करण्यासाठी केला जाऊ शकतो, जसे सक्रिय, प्रभावी पद्धतीने. रेग्युलर एक्स्प्रेशन्स हे टेबल सामग्रीमधील नमुने ओळखण्यासाठी एक उपयुक्त साधन आहे, जे डायनॅमिक क्लास असाइनमेंट आणि इतर परस्परसंवाद सुलभ करते.
शिवाय, वापरकर्त्यांना टेबलच्या स्थितीबद्दल माहिती देण्याची एक उपयुक्त पद्धत म्हणजे या सक्रिय पेशींच्या संख्येवर आधारित एक मॉडेल सुरू करणे. द .dialog() jQuery मधील फंक्शन किंवा कस्टम मॉडेल या दोन पद्धती आहेत ज्या टेबल सामग्री हाताळताना मोठ्या प्रमाणात अष्टपैलुत्व प्रदान करतात.
स्रोत आणि संदर्भ
- डायनॅमिकली क्लास जोडणे आणि JavaScript आणि jQuery वापरून सामग्री हाताळणे यावरील माहिती येथे उपलब्ध असलेल्या तपशीलवार मार्गदर्शकावरून प्राप्त केली गेली. jQuery API दस्तऐवजीकरण .
- सामग्री हाताळण्यासाठी JavaScript मधील रेग्युलर एक्सप्रेशन्स वापरण्यातील अंतर्दृष्टी येथे सापडलेल्या दस्तऐवजीकरणातून संदर्भित केल्या गेल्या. MDN वेब डॉक्स .
- jQuery UI डायलॉग पद्धत वापरून मॉडेल तयार करणे आणि त्याचा तपशीलवार वापर येथे शोधला जाऊ शकतो jQuery UI संवाद दस्तऐवजीकरण .
- जावास्क्रिप्टमधील विशिष्ट वर्गांसह घटक मोजण्याचे महत्त्व आणि व्यावहारिक उदाहरणे यासारख्या लेखांमध्ये पुनरावलोकन केले जाऊ शकतात FreeCodeCamp JavaScript मार्गदर्शक .