Đối tượng HTML DOM ColumnGroup

Đối tượng HTML DOM ColumnGroup liên kết với phần tử HTML <colgroup>. Phần tử <colgroup> được dùng để áp dụng các kiểu CSS cho một số cột cụ thể hoặc tất cả các cột. Điều này cho phép chúng ta có sự kiểm soát lớn hơn đối với các cột có mặt trong một bảng.

Thuộc tính

Sau đây là thuộc tính của ColumnGroup:

Cú pháp

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

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

var x = document.createElement("COLGROUP");

Ví dụ

Hãy xem một ví dụ cho đối tượng 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>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 để tạo phần tử colgroup với 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>

Kết quả

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

Khi nhấn COLGROUP:

Trong ví dụ trên:

Chúng ta đã tạo một bảng với ba hàng và ba cột và id "TABLE 1". Chúng ta cũng đã áp dụng một số kiểu dáng cho bảng và các phần tử con của nó:

table, th, td { border: 1px solid black; } <table id="TABLE1"> <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 COLGROUP sẽ thực thi colFun() khi được nhấp bởi người dùng:

<button onclick="colFun()">COLGROUP</button>

Phương thức colFun() tạo một phần tử <colgroup> và gán nó cho biến x. Sử dụng phương thức setAttribute(), phần tử <colgroup> mới được tạo chúng ta gán cho nó một id và span bằng 2. Chúng ta sau đó nối phần tử <colgroup> làm con đầu tiên của bảng bằng phương thức appendChild() trên phần tử <table>:

function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id", "DIV1"); x.setAttribute("span", "2"); document.getElementById("TABLE1").appendChild(x); }