HTML DOM কলাম স্প্যান প্রপার্টি HTML এ
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলtabledataObject.colSpan = number
এখানে, সংখ্যাটি সারণিটির কলামের সংখ্যার প্রতিনিধিত্ব করে।
উদাহরণ
আসুন colSpan প্রপার্টি −
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
for(var i=0;i<=x;i++){
document.getElementsByClassName("TD1")[i].colSpan = "1";
}
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ-
-এ ক্লিক করলে
উপরের উদাহরণে -
আমরা একটি টেবিল নিয়েছি যেখানে দ্বিতীয় সারি থেকে শুরু হওয়া প্রথম উপাদানগুলি অর্থাৎ জানুয়ারী এবং ফেব্রুয়ারির কোলস্প্যান 2 সমান। এটি টেবিলটিকে তিনটি সারি এবং তিনটি কলাম তৈরি করে। টেবিলটিতে একটি স্টাইল প্রয়োগ করা হয়েছে যাতে এটি অন্যদের থেকে আলাদা দেখায় -
table, th, td {
border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table> তারপরে আমরা পরিবর্তন বোতামটি তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করলে changeSpan() পদ্ধতিটি কার্যকর করবে -
<button onclick="changeSpan()">CHANGE</button>
changeSpan() পদ্ধতিটি নথি বস্তুতে 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";
}
} 