HTML DOM ColumnGroup ऑब्जेक्ट HTML
गुण
ColumnGroup संपत्ति निम्नलिखित है -
| संपत्ति | <थ>विवरण|
|---|---|
| अवधि | स्तंभ समूह की अवधि विशेषता का मान सेट या लौटाता है |
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैColumnGroup ऑब्जेक्ट बनाना -
var x = document.createElement("COLGROUP"); उदाहरण
आइए 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>Click the below button to create a colgroup element with span = 2.</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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
कोलग्रुप पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने पहले तीन पंक्तियों और तीन स्तंभों वाली एक तालिका बनाई है और आईडी "तालिका 1" है। हमने टेबल और उसके बच्चों के तत्वों पर कुछ शैलियों को भी लागू किया है -
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() विधि एक