क्लिक के साथ HTML टेबल्स में हाइलाइटिंग पंक्तियाँ

जब आप HTML में वेब पेज बनाते हैं, तो आप उपयोगकर्ता सहभागिता पर पृष्ठ तत्वों की उपस्थिति को बदलने के लिए जावास्क्रिप्ट कार्यों का उपयोग कर सकते हैं। एक तालिका में कुछ पंक्तियों को उजागर करने के लिए, आप इन पंक्तियों के लिए कैस्केडिंग स्टाइल शीट घोषणाओं को उनके सामान्य स्थिति में और उनके हाइलाइट किए गए राज्य में सेट कर सकते हैं। पंक्ति तत्वों में ईवेंट श्रोता विशेषता जोड़कर, आपका पृष्ठ onclicks को निष्पादित करने के लिए जावास्क्रिप्ट फ़ंक्शन को कॉल कर सकता है, तत्व के वर्ग नाम विशेषताओं को गतिशील रूप से बदल सकता है और बाद में उनकी उपस्थिति को बदल सकता है।

1।

अपनी HTML तालिका बनाएं। अपनी वेब पेज फ़ाइल में निम्न नमूना मार्कअप कोड जोड़ें:

1	2	3
4	5	6

इस तालिका में तीन स्तंभों वाली दो पंक्तियाँ हैं। प्रदर्शन के लिए प्रत्येक सेल में एक संख्या होती है, लेकिन आप अपने पेज में अपनी पसंद की कोई भी सामग्री शामिल कर सकते हैं।

2।

अपने पृष्ठ के मुख्य भाग में CSS के लिए एक अनुभाग जोड़ें। अपनी फ़ाइल में मुख्य टैग खोलने और बंद करने के बीच, निम्नलिखित सीएसएस कोड रूपरेखा जोड़ें:

यह कोड उपयोगकर्ता द्वारा उन्हें क्लिक करने पर लाल पृष्ठभूमि के साथ डिफ़ॉल्ट रूप से एक सफेद पृष्ठभूमि वाली तालिका पंक्तियाँ सेट करता है। अपने स्वयं के पृष्ठ की शैली को दर्शाने के लिए आप इन सेटिंग्स को बदल सकते हैं। जब उपयोगकर्ता पहली बार पृष्ठ को देखता है, तो सामान्य सीएसएस सेटिंग्स लागू होंगी, जैसा कि मूल HTML कोड के भीतर तालिका पंक्ति वर्ग विशेषताओं द्वारा इंगित किया गया है।

3।

अपने पेज हेड सेक्शन में जावास्क्रिप्ट के लिए एक सेक्शन जोड़ें। आपकी फ़ाइल में हेड टैग खोलने और बंद करने के बीच, निम्न कोड जोड़ें:

यह एक स्क्रिप्ट अनुभाग और एक फ़ंक्शन रूपरेखा बनाता है। ब्राउज़र इस फ़ंक्शन को कॉल करेगा जब उपयोगकर्ता आपकी किसी भी तालिका पंक्तियों पर क्लिक करता है, तो क्लिक की गई पंक्ति के आईडी विशेषता मान को पास करना ताकि स्क्रिप्ट इसकी पहचान कर सके।

4।

अपनी तालिका पंक्ति तत्वों के वर्ग नाम को बदल दें। जब फ़ंक्शन निष्पादित होता है, तो इसका मतलब है कि उपयोगकर्ता ने एक पंक्ति तत्व पर क्लिक किया है। अपने जावास्क्रिप्ट फ़ंक्शन के अंदर निम्न कोड जोड़ें, पृष्ठ के भीतर तालिका पंक्ति तत्व का संदर्भ प्राप्त करते हुए: var row = document.getElementById (पंक्ति);

अपनी तालिका पंक्ति तत्व के वर्तमान वर्ग के नाम की एक स्ट्रिंग प्रतिलिपि प्राप्त करने के लिए निम्नलिखित पंक्ति जोड़ें: var curr = row.className;

अपनी तालिका पंक्ति उपस्थिति को दर्ज़ करते हुए एक सशर्त विवरण जोड़ें: यदि (cur.indexOf ("normal")> = 0) row.className = "highlight"; और पंक्ति .className = "सामान्य";

यदि आपकी तालिका पंक्ति वर्तमान में सामान्य रूप से सेट है, तो फ़ंक्शन इसे हाइलाइट की स्थिति के लिए बदल देगा। यदि यह वर्तमान में हाइलाइट किया गया है, तो फ़ंक्शन इसे वापस सामान्य में बदल देगा। यह एक टॉगल प्रभाव पैदा करेगा, जिसमें हर बार जब उपयोगकर्ता पंक्ति पर क्लिक करता है तो हाइलाइट स्थिति के साथ।

5।

अपनी फ़ाइल सहेजें और वेब ब्राउज़र प्रोग्राम में पेज खोलें। पंक्तियों पर बार-बार क्लिक करके पृष्ठ का परीक्षण करें। जब भी आप किसी पंक्ति पर क्लिक करते हैं, तो आपको हर बार पृष्ठभूमि का रंग बदलना चाहिए। यदि पेज क्लिक करने पर पंक्तियों को उजागर नहीं करता है, तो अपना कोड जांचें और इसे फिर से खोलें। अपनी साइट के लिए हाइलाइटिंग और प्रस्तुति का स्तर प्रदान करने के लिए कोड बढ़ाएं।