HTMLDOMColumnGroupオブジェクト
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-
をクリックすると
上記の例では-
最初に、3行3列でIDが「TABLE1」のテーブルを作成しました。また、テーブルとその子要素にいくつかのスタイルを適用しました-
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> 次に、ユーザーがクリックするとcolFun（）を実行するボタンCOLGROUPを作成しました-
<button onclick="colFun()">COLGROUP</button>
colFun（）メソッドは