HTML DOM कॉलम स्पैन गुण HTML में तत्व के अंदर colspan विशेषता से जुड़ा है। colSpan गुण का उपयोग करके हम किसी तालिका के colspan विशेषता को सेट या वापस कर सकते हैं। colspan विशेषता का उपयोग संख्या बनाने के लिए किया जाता है। उन स्तंभों की संख्या जिनमें एक तालिका का विस्तार होना चाहिए।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैtabledataObject.colSpan =संख्या
यहां, संख्या उन स्तंभों की संख्या दर्शाती है, जिन पर तालिका को विस्तार करना चाहिए।
उदाहरण
आइए हम colSpan गुण के लिए एक उदाहरण देखें -
मासिक बचत
माह | बचत | |
---|---|---|
जनवरी | $100 | |
फरवरी | $100 |
<बटन onclick="changeSpan ()">बदलें
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
चेंज क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने एक तालिका ली है, जहां दूसरी पंक्ति यानी जनवरी और फरवरी से शुरू होने वाले पहले तत्वों में कोलस्पैन 2 के बराबर है। इससे तालिका में तीन पंक्तियाँ और तीन कॉलम होते हैं। तालिका को अन्य से अलग दिखाने के लिए उस पर एक शैली लागू की गई है -
टेबल, th, td { बॉर्डर:1px सॉलिड ब्लू;}<टेबल>महीनाबचतजनवरी$100फरवरी$100
हमने तब चेंज बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजस्पैन () विधि को निष्पादित करेगा -
चेंजस्पैन () विधि दोनों
var x=document.getElementsByClassName("TD1").length;function changeSpan() { for(var i=0;i<=x;i++){ document.getElementsByClassName("TD1")[i].colSpan ="1"; }}