HTML DOM ColumnGroup span คุณสมบัติ

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

ไวยากรณ์

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

การตั้งค่าคุณสมบัติช่วง ColumnGroup -

columngroupObject.span = number

ในที่นี้ ตัวเลขจะระบุจำนวนคอลัมน์ที่องค์ประกอบ ควรขยายไป

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับคุณสมบัติช่วงของ ColumnGroup -

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px solid blue;
   }
</style>
</head>
<body>
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>
<p>lick the button to change the background color of the first two columns.
<button onclick="changeColor()">CHANGE</button>
<script>
   function changeColor() {
      document.getElementById("Colgroup1").span = "2";
      document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM ColumnGroup span คุณสมบัติ

เมื่อคลิกปุ่ม CHANGE -

HTML DOM ColumnGroup span คุณสมบัติ

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

เราได้สร้างตารางที่มีสองแถวและสามคอลัมน์ นอกจากนี้ยังมีการจัดรูปแบบที่ใช้กับองค์ประกอบตาราง th และ td -

table, th, td {
   border: 1px solid blue;
}
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>

จากนั้นเราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด changeColor() เมื่อผู้ใช้คลิก

<button onclick="changeColor()">CHANGE</button>

ฟังก์ชัน changeColor() รับองค์ประกอบ โดยใช้เมธอด getElementById() และกำหนด id องค์ประกอบ เป็นพารามิเตอร์ จากนั้นกำหนดองค์ประกอบ เป็น 2 และเปลี่ยนสีพื้นหลังเป็นสีเขียว สิ่งนี้ทำให้สองคอลัมน์แรกจากสีเขียวซ้ายตามที่ระบุโดยแอตทริบิวต์ span ขององค์ประกอบ :

function changeColor() {
   document.getElementById("Colgroup1").span = "2";
   document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
}