HTML DOM Column ऑब्जेक्ट

HTML DOM Column ऑब्जेक्ट HTML <col> एलिमेंट से जुड़ा होता है। Column ऑब्जेक्ट का उपयोग <col> एलिमेंट की प्रॉपर्टीज को प्राप्त या सेट करने के लिए किया जाता है। <col> टैग का उपयोग केवल <table> एलिमेंट के अंदर किया जाता है।

प्रॉपर्टीज (Properties)

Column ऑब्जेक्ट के लिए प्रॉपर्टी:

सिंटैक्स (Syntax)

Column ऑब्जेक्ट बनाने का सिंटैक्स:

var a = document.createElement("COL");

उदाहरण (Example)

Column ऑब्जेक्ट का एक उदाहरण:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } #Col1 { background-color: pink; } </style> </head> <body> <h3>COL OBJECT</h3> <table> <colgroup> <col id="Col1" span="2"> <col style="background-color: lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table> <p>"COL1" col एलिमेंट का span प्राप्त करने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <button onclick="colObj()">COLUMN</button> <p id="Sample"></p> <script> function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= " + x; } </script> </body> </html>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

COLUMN बटन पर क्लिक करने पर:

उपरोक्त उदाहरण में हमने 2 पंक्तियों और 3 कॉलम वाली एक टेबल बनाई है। टेबल पर समग्र रूप से एक स्टाइल लागू है। टेबल के अंदर, हमारे पास दो <col> एलिमेंट्स हैं जिनमें से एक का span 2 के बराबर है और दूसरे पर इंलाइन स्टाइल लागू है। चूंकि पहले <col> के लिए span 2 के बराबर है, इसकी स्टाइल ठीक दो कॉलम पर लागू होगी और दूसरा <col> अपनी स्टाइल को शेष कॉलम पर लागू करेगा:

table, th, td { border: 1px solid blue; } #Col1 { background-color: pink; } <table> <colgroup> <col id="Col1" span="2"> <col style="background-color: lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table>

फिर हमने एक COLUMN बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर colObj() मेथड को एक्जीक्यूट करेगा:

<button onclick="colObj()">COLUMN</button>

colObj() मेथड डॉक्यूमेंट ऑब्जेक्ट पर getElementById() मेथड का उपयोग करके पहले <col> एलिमेंट को प्राप्त करता है। फिर यह <col> एलिमेंट के span एट्रिब्यूट वैल्यू को प्राप्त करता है और इसे वेरिएबल x में असाइन करता है। वेरिएबल x में स्टोर की गई span एट्रिब्यूट वैल्यू को फिर "Sample" आईडी वाले पैराग्राफ में पैराग्राफ की innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है:

function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= " + x; }