tdObject.rowSpanプロパティ

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

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

構文

取得

$tdElementReference.rowSpan;

戻り値

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

設定

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

$tdElementReference.rowSpan = 2; // セル(td要素)の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 $tdElementReference = document.getElementById( "sample" );
    $tdElementReference.rowSpan = $n;
    document.getElementById( "sampleOutput" ).innerHTML = $tdElementReference.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>
        <td id="sample" rowSpan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</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オブジェクト, リファレンス パーマリンク