एचटीएमएल डोम कॉलम अवधि संपत्ति

<घंटा/>

HTML DOM कॉलम स्पैन गुण HTML में तत्व के अंदर colspan विशेषता से जुड़ा है। colSpan गुण का उपयोग करके हम किसी तालिका के colspan विशेषता को सेट या वापस कर सकते हैं। colspan विशेषता का उपयोग संख्या बनाने के लिए किया जाता है। उन स्तंभों की संख्या जिनमें एक तालिका का विस्तार होना चाहिए।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

tabledataObject.colSpan =संख्या

यहां, संख्या उन स्तंभों की संख्या दर्शाती है, जिन पर तालिका को विस्तार करना चाहिए।

उदाहरण

आइए हम colSpan गुण के लिए एक उदाहरण देखें -

मासिक बचत
 माह बचत
जनवरी  $100
फरवरी $100

<बटन onclick="changeSpan ()">बदलें

माह	बचत
जनवरी	$100
फरवरी	$100

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

एचटीएमएल डोम कॉलम अवधि संपत्ति

चेंज क्लिक करने पर -

एचटीएमएल डोम कॉलम अवधि संपत्ति

उपरोक्त उदाहरण में -

हमने एक तालिका ली है, जहां दूसरी पंक्ति यानी जनवरी और फरवरी से शुरू होने वाले पहले तत्वों में कोलस्पैन 2 के बराबर है। इससे तालिका में तीन पंक्तियाँ और तीन कॉलम होते हैं। तालिका को अन्य से अलग दिखाने के लिए उस पर एक शैली लागू की गई है -

टेबल, th, td { बॉर्डर:1px सॉलिड ब्लू;}<टेबल>महीनाबचतजनवरी$100फरवरी$100

हमने तब चेंज बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजस्पैन () विधि को निष्पादित करेगा -

चेंजस्पैन () विधि दोनों

तत्वों को दस्तावेज़ ऑब्जेक्ट पर getElementsByClassName () विधि का उपयोग करके और दोनों को एक्सेस करने के लिए इंडेक्सिंग का उपयोग करके प्राप्त करती है। इसके बाद दोनों

तत्वों का colSpan विशेषता मान प्राप्त करता है और उन्हें 2 से 1 में बदल देता है -

var x=document.getElementsByClassName("TD1").length;function changeSpan() { for(var i=0;i<=x;i++){ document.getElementsByClassName("TD1")[i].colSpan ="1"; }}