Đối tượng HTML DOM Column được liên kết với phần tử HTML
| Thuộc tính | Mô tả |
|---|---|
| Khoảng cách | Để đặt hoặc trả về giá trị thuộc tính span của một cột. |
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng Cột -
var a = document.createElement("COL"); Ví dụ
Hãy để chúng tôi xem một ví dụ cho đối tượng cột -
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
#Col1{
background-color:pink;
}
</style>
</head>
<body>
<h3>COL OBJECT</h3>
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<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 get span of the "COL1" col element</p>
<button onclick="colObj()">COLUMN</button>
<p id="Sample"></p>
<script>
function colObj() {
var x = document.getElementById("Col1").span;
document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút COLUMN -
Trong ví dụ trên, chúng ta đã tạo một bảng có 2 hàng và 3 cột. Bảng tổng thể có một phong cách được áp dụng cho nó. Bên trong bảng, chúng ta có hai phần tử
table, th, td {
border: 1px solid blue;
}
#Col1{
background-color:pink;
}
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<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> Sau đó, chúng tôi đã tạo một nút COLUMN sẽ thực thi phương thức colObj () khi người dùng nhấp vào -
<button onclick="colObj()">COLUMN</button>
Phương thức colObj () nhận phần tử
function colObj() {
var x = document.getElementById("Col1").span;
document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}