資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學HTML DOM ColumnGroup 物件
HTML DOM ColumnGroup 物件與 HTML <colgroup> 元素關聯。<colgroup> 元素用於將 CSS 樣式應用於特定數量的列或所有列。這使我們能夠更好地控制表格中存在的列。
屬性
以下是 ColumnGroup 屬性 -
| 屬性 | 描述 |
|---|---|
| span | 設定或返回列組的 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 時 -
在以上示例中 -
我們首先建立了一個包含三行三列，id 為 "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() 方法建立了一個 <colgroup> 元素並將其賦給變數 x。使用 setAttribute() 方法，我們為新建立的 <colgroup> 元素分配了一個 id 和等於 2 的 span。然後，使用 <table> 元素上的 appendChild() 方法將 <colgroup> 元素附加為表格的第一個子元素 -
function colFun() {
var x = document.createElement("COLGROUP");
x.setAttribute("id","DIV1");
x.setAttribute("span","2");
document.getElementById("TABLE1").appendChild(x);
}
更新於: 20-Feb-2021
82 次瀏覽
廣告