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>
function setColSpan( $n ){
var $tdElementReference = document.getElementById( "sample" );
$tdElementReference.rowSpan = $n;
document.getElementById( "sampleOutput" ).innerHTML = $tdElementReference.rowSpan;
}
</script>
HTML
<p>
<button onclick="setColSpan(1)">1</button>
<button onclick="setColSpan(2)">2</button>
<button onclick="setColSpan(3)">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>
<button onclick="setColSpan(1)">1</button>
<button onclick="setColSpan(2)">2</button>
<button onclick="setColSpan(3)">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>
#sample {
background-color: yellow;
}
</style>