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

HTML DOMのcolSpanプロパティとは？使い方をサンプルコード付きで解説

colSpanプロパティとは

HTML DOMのcolSpanプロパティは、<td>要素（テーブルのセル）に設定されるcolspan属性に対応したプロパティです。JavaScriptからこのプロパティを操作することで、セルのcolspan属性値を取得したり、動的に変更したりすることが可能になります。

colspan属性は、1つのセルが横方向にまたがる列の数を指定するために使用されます。例えば「colspan="2"」と設定すれば、そのセルは2列分の幅を持つことになり、テーブルのレイアウトを柔軟に制御できます。

構文

colSpanプロパティの基本構文は以下のとおりです。

tabledataObject.colSpan = number

numberには、セルがまたがる列数を表す数値を指定します。

サンプルコード

続いて、colSpanプロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、テーブルセルの結合数（colspan）が変化するデモです。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
    var x=document.getElementsByClassName("TD1").length;
    function changeSpan() {
        for(var i=0;i<x;i++){
            document.getElementsByClassName("TD1")[i].colSpan = "1";
        }
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

HTML DOMのcolSpanプロパティとは？使い方をサンプルコード付きで解説

「CHANGE」ボタンをクリックすると、表示は次のように変化します。

HTML DOMのcolSpanプロパティとは？使い方をサンプルコード付きで解説

コードの解説

テーブルとスタイルの定義

まず、2行目以降の先頭セル（January・February）に「colspan="2"」が設定されたテーブルを用意しています。これにより、データ行は3列分の幅を持つ構成になります。また、テーブル全体に青色の枠線スタイルを適用し、見た目を整えています。

table, th, td {
    border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>

CHANGEボタンの設置

次に、ユーザーがクリックするとchangeSpan()関数を実行するボタンを作成しています。

<button onclick="changeSpan()">CHANGE</button>

changeSpan()関数の処理内容

changeSpan()関数では、documentオブジェクトのgetElementsByClassName()メソッドを使って「TD1」クラスを持つすべての<td>要素を取得し、インデックスを指定して各要素へ順番にアクセスします。そして、それぞれのcolSpanプロパティの値を「2」から「1」へ書き換えています。

var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
    for(var i=0;i<x;i++){
        document.getElementsByClassName("TD1")[i].colSpan = "1";
    }
}

なお、ループ条件は「i < x」とすることで、取得した要素数の範囲外（存在しない要素）へのアクセスを防ぎ、エラーの発生を回避できます。

まとめ

colSpanプロパティを使えば、JavaScriptからテーブルセルの列結合数を自由に操作できます。なお、縦方向のセル結合を扱うrowSpanプロパティも用意されているので、合わせて覚えておくとテーブル操作の幅がさらに広がります。

  1. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1

  2. HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

    ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの