HTML DOM ช่วงคอลัมน์คุณสมบัติ

คุณสมบัติช่วงคอลัมน์ HTML DOM เชื่อมโยงกับแอตทริบิวต์ colspan ภายในองค์ประกอบ ใน HTML การใช้คุณสมบัติ colSpan เราสามารถตั้งค่าหรือส่งคืนแอตทริบิวต์ colspan ของตารางได้ ใช้แอตทริบิวต์ colspan เพื่อสร้างหมายเลข ของคอลัมน์ที่ควรขยายไปยังตาราง

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM ช่วงคอลัมน์คุณสมบัติ

เมื่อคลิกเปลี่ยน -

HTML DOM ช่วงคอลัมน์คุณสมบัติ

ในตัวอย่างข้างต้น −

เราได้นำตารางที่องค์ประกอบแรกเริ่มต้นจากแถวที่สองเช่นมกราคมและกุมภาพันธ์มี colspan เท่ากับ 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>

จากนั้นเราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด 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";
   }
}