HTML DOM ColumnGroup অবজেক্টটি HTML উপাদানের সাথে যুক্ত। উপাদানটি একটি নির্দিষ্ট সংখ্যক কলাম বা সমস্ত কলামে CSS শৈলী প্রয়োগ করতে ব্যবহৃত হয়। এটি আমাদের একটি টেবিলে উপস্থিত কলামগুলির উপর একটি বৃহত্তর নিয়ন্ত্রণ দেয়৷
সম্পত্তি
নিচের ColumnGroup সম্পত্তি −
সম্পত্তি | বিবরণ |
---|---|
span | একটি কলাম গ্রুপের স্প্যান অ্যাট্রিবিউটের মান সেট করে বা ফেরত দেয় |
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলএকটি 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>
আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
COLGROUP -
-এ ক্লিক করলে
উপরের উদাহরণে -
আমরা প্রথমে তিনটি সারি এবং তিনটি কলাম এবং "টেবিল 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() পদ্ধতি একটি উপাদান তৈরি করে এবং এটি পরিবর্তনশীল x-এ বরাদ্দ করে। setAttribute() পদ্ধতি ব্যবহার করে নতুন তৈরি করা উপাদানটিকে আমরা একটি আইডি বরাদ্দ করি এবং স্প্যান 2 এর সমান। তারপরে আমরা
উপাদান −<-এ appendChild() পদ্ধতি ব্যবহার করে টেবিলের প্রথম চাইল্ড হিসাবে উপাদানটিকে যুক্ত করি। /P>function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id","DIV1"); x.setAttribute("span","2"); document.getElementById("TABLE1").appendChild(x); }
- C প্রোগ্রামিং
- C++
- Redis
- BASH প্রোগ্রামিং
- Python
- Java
- তথ্যশালা
- HTML
- JavaScript
- প্রোগ্রামিং
- CSS
- Ruby
- SQL
- IOS
- Android
- mongodb
- MySQL
- C#
- PHP
- SQL সার্ভার