ออบเจ็กต์ HTML DOM ColumnGroup เชื่อมโยงกับองค์ประกอบ HTML
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติ 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 -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างตารางที่มีสามแถวและสามคอลัมน์และรหัส "TABLE 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() สร้างองค์ประกอบ
