HTML DOM ColumnGroup ऑब्जेक्ट

HTML DOM ColumnGroup ऑब्जेक्ट HTML <colgroup> एलिमेंट से जुड़ा होता है। <colgroup> एलिमेंट का उपयोग किसी विशिष्ट संख्या के कॉलम या सभी कॉलम पर CSS स्टाइल्स लागू करने के लिए किया जाता है। यह हमें टेबल में मौजूद कॉलम्स पर अधिक नियंत्रण देता है।

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

ColumnGroup प्रॉपर्टी:

सिंटैक्स (Syntax)

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

var x = document.createElement("COLGROUP");

उदाहरण (Example)

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

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } #DIV1 { background-color: pink; } </style> </head> <body> <table id="TABLE1"> <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>span = 2 के साथ colgroup एलिमेंट बनाने के लिए नीचे दिए गए बटन पर क्लिक करें।</p> <button onclick="colFun()">COLGROUP</button> <script> function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id", "DIV1"); x.setAttribute("span", "2"); document.getElementById("TABLE1").appendChild(x); } </script> </body> </html>

आउटपुट (Output)

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

COLGROUP पर क्लिक करने पर:

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

हमने पहले तीन पंक्तियों और तीन कॉलम वाली एक टेबल बनाई जिसकी आईडी "TABLE1" है। हमने टेबल और उसके चाइल्ड एलिमेंट्स पर कुछ स्टाइल्स भी लागू किए हैं:

table, th, td { border: 1px solid black; } <table id="TABLE1"> <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>

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

<button onclick="colFun()">COLGROUP</button>

colFun() मेथड एक <colgroup> एलिमेंट बनाता है और इसे वेरिएबल x में असाइन करता है। setAttribute() मेथड का उपयोग करके नए बने <colgroup> एलिमेंट को हम एक आईडी और span = 2 असाइन करते हैं। फिर हम <table> एलिमेंट पर appendChild() मेथड का उपयोग करके <colgroup> एलिमेंट को टेबल के पहले चाइल्ड के रूप में जोड़ते हैं:

function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id", "DIV1"); x.setAttribute("span", "2"); document.getElementById("TABLE1").appendChild(x); }