thObject.rowSpanプロパティ

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

rowSpan属性には、垂直方向(縦方向)におけるセルの結合数を指定できる。

構文

取得

$thElementReference.rowSpan;

戻り値

見出しセル(th要素)のrowSpan属性の値。垂直方向(縦方向)におけるセルの結合数。

設定

$thElementReference.rowSpan = 結合数;
結合数
垂直方向(縦方向)におけるセルの結合数を指定。

$thElementReference.rowSpan = 2; // 見出しセル(th要素)のrowSpan属性値を「2」に設定

サンプル

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

1-1 1-2 1-3
2-1 2-2
3-1 3-2 3-3

サンプルの動作について

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

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

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

サンプルのソースコード

JavaScript

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

HTML

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

CSS

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

スポンサード リンク

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