HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM ColumnGroupオブジェクトの使い方とプロパティを徹底解説

HTML DOMのColumnGroupオブジェクトは、HTMLの<colgroup>要素に関連付けられたオブジェクトです。<colgroup>要素を使用すると、テーブル内の特定の列、あるいはすべての列に対してまとめてCSSスタイルを適用できます。これにより、テーブルの各列をより柔軟かつ細かく制御することが可能になります。

ColumnGroupオブジェクトのプロパティ

ColumnGroupオブジェクトには、以下のプロパティが用意されています。

プロパティ説明
span列グループ（colgroup）の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>下のボタンをクリックすると、span = 2 のcolgroup要素が作成されます。</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>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM ColumnGroupオブジェクトの使い方とプロパティを徹底解説

「COLGROUP」ボタンをクリックすると、以下のように表示が変化します。

HTML DOM ColumnGroupオブジェクトの使い方とプロパティを徹底解説

コードの解説

このサンプルコードの処理内容を順番に見ていきましょう。

まず、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()メソッドでは、<colgroup>要素を新しく作成して変数xに代入しています。続いてsetAttribute()メソッドを使い、作成した<colgroup>要素にidと「span = 2」を設定します。最後に、<table>要素に対してappendChild()メソッドを呼び出し、<colgroup>要素をテーブルの子要素として追加しています。

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

このように、JavaScriptから動的に<colgroup>要素を生成・操作することで、テーブルの列スタイルを柔軟に制御できます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注