tdObject.colSpanプロパティ

tdObject.colSpanは、表(table要素)におけるセル(td要素)のcolSpan属性値を取得、もしくは、設定するプロパティ。

colSpan属性には、水平方向(横方向)におけるセルの結合数を指定できる。

構文

取得

$tdElementReference.colSpan;

戻り値

セル(td要素)のcolSpan属性の値。水平方向(横方向)におけるセルの結合数。

設定

$tdElementReference.colSpan = 結合数;
結合数
水平方向(横方向)におけるセルの結合数を指定。

$tdElementReference.colSpan = 2; // セル(td要素)のcolSpan属性値を「2」に設定

サンプル

背景色が黄色のセルのcolSpan属性値:

1行目1列目 1行目2列目 1行目3列目
2行目1列目
3行目1列目 3行目2列目 3行目3列目

サンプルの動作について

「1」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「1」にする。「背景色が黄色のセルのcolSpan属性値:」の右横に、「1」と表示する。

「2」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「2」にする。「背景色が黄色のセルのcolSpan属性値:」の右横に、「2」と表示する。

「3」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「3」にする。「背景色が黄色のセルのcolSpan属性値:」の右横に、「3」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setColSpan( $n ){
    var $tdElementReference = document.getElementById( "sample" );
    $tdElementReference.colSpan = $n;
    document.getElementById( "sampleOutput" ).innerHTML = $tdElementReference.colSpan;
}
</script>

HTML

<p>
    <button onclick="setColSpan(1)"></button>
    <button onclick="setColSpan(2)"></button>
    <button onclick="setColSpan(3)"></button>
</p>
<p>
    背景色が黄色のセルのcolSpan属性値:<span id="sampleOutput"></span>
</p>
<table>
    <tr>
        <td>1行目1列目</td>
        <td>1行目2列目</td>
        <td>1行目3列目</td>
    </tr>
    <tr>
        <td id="sample" colSpan="2">2行目1列目</td>
    </tr>
    <tr>
        <td>3行目1列目</td>
        <td>3行目2列目</td>
        <td>3行目3列目</td>
    </tr>
</table>

CSS

<style>
#sample {
    background-color: yellow;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, Tdオブジェクト, リファレンス パーマリンク