Đối tượng HTML DOM Column

Đối tượng HTML DOM Column liên kết với phần tử HTML <col>. Đối tượng Column được dùng để lấy hoặc thiết lập các thuộc tính của phần tử <col>. Thẻ <col> chỉ được dùng bên trong phần tử <table>.

Thuộc tính

Sau đây là thuộc tính cho đối tượng column:

Cú pháp

Cú pháp sau đây dùng cho:

Tạo đối tượng Column:

var a = document.createElement("COL");

Ví dụ

Hãy xem một ví dụ cho đối tượng column:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } </style> </head> <body> <h3>ĐỐI TƯỢNG COL</h3> <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Trái cây</th> <th>Màu</th> <th>Giá</th> </tr> <tr> <td>Xoài</td> <td>Vàng</td> <td>100Rs</td> </tr> <tr> <td>Ổi</td> <td>Xanh</td> <td>50Rs</td> </tr> </table> <p>Nhấn nút bên dưới để lấy span của phần tử col "COL1"</p> <button onclick="colObj()">CỘT</button> <p id="Sample"></p> <script> function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "Phần tử Col1 có span= " + x; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút CỘT:

Trong ví dụ trên, chúng ta đã tạo một bảng với 2 hàng và 3 cột. Bảng tổng thể có kiểu dáng được áp dụng. Bên trong bảng, chúng ta có hai phần tử <col> với một có span bằng 2 và cái kia có kiểu dáng nội tuyến được áp dụng. Vì cho <col> đầu tiên span bằng 2, kiểu dáng của nó sẽ áp dụng chính xác cho hai cột và <col> thứ hai sẽ áp dụng kiểu dáng của nó cho các cột còn lại:

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>Trái cây</th> <th>Màu</th> <th>Giá</th> </tr> <tr> <td>Xoài</td> <td>Vàng</td> <td>100Rs</td> </tr> <tr> <td>Ổi</td> <td>Xanh</td> <td>50Rs</td> </tr> </table>

Chúng ta đã tạo nút CỘT sẽ thực thi phương thức colObj() khi được nhấp bởi người dùng:

<button onclick="colObj()">CỘT</button>

Phương thức colObj() lấy phần tử <col> đầu tiên bằng phương thức getElementById() trên đối tượng document. Sau đó nó lấy giá trị thuộc tính span của phần tử <col> và gán nó cho biến x. Giá trị thuộc tính span được lưu trữ trong biến x sau đó được hiển thị trong đoạn văn với id "Sample" bằng thuộc tính innerHTML của đoạn văn:

function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "Phần tử Col1 có span= " + x; }