tableObject.cellsコレクション

tableObject.cellsは、表(table要素)内のセル(td要素またはth要素)のコレクション。

構文

$tableElementReference.cells;

$tableElementReference.rows[0].cells[0]; // 表の1行目の1列目のセルへの参照
$tableElementReference.rows[0].cells[1]; // 表の1行目の2列目のセルへの参照
$tableElementReference.rows[1].cells[0]; // 表の2行目の1列目のセルへの参照

$tableElementReference.rows[0].cells.length; // 表の1行目の列の数

$tableElementReference.rows[0].cells[0].innerHTML; // 表の1行目の1列目のセルの内容

サンプル

クリックしたセルの内容:

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

サンプルの動作について

セルをクリックすると、クリックしたセルの内容を、「クリックしたセルの内容:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function(){
    var $sampleRows = document.getElementById( "sample" ).rows;
    for ( var $rowIndex = 0; $rowIndex < $sampleRows.length; $rowIndex++ ) {
        var $sampleCells = $sampleRows[$rowIndex].cells;
        for ( var $cellIndex = 0; $cellIndex < $sampleCells.length; $cellIndex++ ) {
            $sampleCells[$cellIndex].onclick = function(){
                getValue( this.innerHTML );
            };
        }
    }
}
function getValue( $contents ) {
    document.getElementById( "sampleOutputValue" ).innerHTML = $contents;
}
</script>

HTML

<p>クリックしたセルの内容:<span id="sampleOutputValue"></span></p>
<table id="sample">
    <tr>
        <td>1行目1列目</td>
        <td>1行目2列目</td>
        <td>1行目3列目</td>
    </tr>
    <tr>
        <td>2行目1列目</td>
        <td>2行目2列目</td>
        <td>2行目3列目</td>
    </tr>
    <tr>
        <td>3行目1列目</td>
        <td>3行目2列目</td>
        <td>3行目3列目</td>
    </tr>
</table>

スポンサード リンク

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