JavaScriptからtable要素を制御する方法

HTML要素とJavaScriptオブジェクトの対応関係

HTML要素 オブジェクト
table HTMLTableElement
tr HTMLTableRowElement
th HTMLTableCellElement、HTMLTableHeaderCellElement
td HTMLTableCellElement、HTMLTableDataCellElement
thead HTMLTableSectionElement
tbody
tfoot
caption HTMLTableCaptionElement
colgroup  
col HTMLTableColElement

テーブルを操作するメソッド

HTML要素 作成※1 削除※2
table 
Document.createElement( 'table' )
 
Node.removeChild( oldChild )
tr 
Table.insertRow( index )
 
Table.deleteRow( index )
th 
Document.createElement( 'th' )
 
TableRow.deleteCell( index )
td 
TableRow.insertCell( index )

※1 tr要素とtd要素には専用のメソッドが用意されていますが、それ以外は汎用のDocument.CreateElementメソッドを使用します。

※2 deleteRow()、deleteCell()はremoveChild()と異なり、削除した要素を返しません。

テーブル (table)

テーブルの作成

var table = document.createElement( 'table' );

行 (tr)

新しい行を最後に追加

var row = table.insertRow( -1 );
HTMLTableElement.insertRow() - Web API Interfaces | MDN

引数を省略した場合には-1を指定したものと見なされ、行数を表すtable.rows.lengthを指定したときと同様に末尾に追加されます。

引数を省略した場合、一部のブラウザ (SafariやAndroidの標準ブラウザ) では0を指定したものと見なされ先頭に追加されます。よって引数を省略すべきではありません。

引数を省略 … insertRow()
引数に-1を指定 … insertRow( -1 )
引数に0を指定 … insertRow( 0 )

セル (th、td)

新しいセルを最後に追加

th要素
var th = document.createElement( 'th' );
row.appendChild( th );
td要素
var td = row.insertCell( -1 );
HTMLTableRowElement.insertCell() - Web API Interfaces | MDN

引数を省略した場合には-1を指定したものと見なされ、セル数を表すrow.cells.lengthを指定したときと同様に末尾に追加されます。

引数を省略した場合、一部のブラウザ (SafariやAndroidの標準ブラウザ) では0を指定したものと見なされ先頭に追加されます。よって引数を省略すべきではありません。

引数を省略 … insertCell()
引数に-1を指定 … insertCell( -1 )
引数に0を指定 … insertCell( 0 )

テーブルの要素へのアクセス

行 (tr)

テーブルの行へは、Table.rowsプロパティからアクセスできます。このプロパティはTableRowオブジェクトの配列 (HTMLCollection) であるため、n行目の行はTable.rows[ n ]で参照できます。

セル (th、td)

行のセルへは、TableRow.cellsプロパティからアクセスできます。このプロパティはTableCellオブジェクトの配列 (HTMLCollection) であるため、n列目のセルはTableRow.cells[ n ]で参照できます。

たとえば、

1 2 3
4 5 6
7 8 9

のようなテーブルがあるとき、

table.rows[ 1 ].cells[ 2 ].firstChild.data;

は「6」を返します。

表本体 (tbody)

tbodyへはtBodiesプロパティからアクセスできますが、このプロパティから返されるのはHTMLCollectionのため、HTMLTableElementが実装するメソッドなどは使用できません。よってその必要があるならばtbodyにid属性を設定しておき、getElementById()で要素を直接取得します。 HTMLTableElement.tBodies - Web APIs | MDN HTMLTableElement.insertRow() - Web APIs | MDN

サンプルコード

すべての行を削除する

0行目の行が存在しなくなるまで0行目の行の削除をくり返すことで、すべての行を削除できます。

while( table.rows[ 0 ] ) table.deleteRow( 0 );

たとえば下表のように0行目にヘッダが存在する場合、このヘッダ部分だけを残して行を削除するには、

AAA BBB
1 2
3 4

削除の対象を1行目以降に変更します。

while( table.rows[ 1 ] ) table.deleteRow( 1 );

マウスポインタがあるセルの、行と列に着色する

下のテーブルに、マウスポインタを合わせてください。

  1 2 3 4 5
1 (1, 1) (2, 1) (3, 1) (4, 1) (5, 1)
2 (1, 2) (2, 2) (3, 2) (4, 2) (5, 2)
3 (1, 3) (2, 3) (3, 3) (4, 3) (5, 3)
4 (1, 4) (2, 4) (3, 4) (4, 4) (5, 4) 
var TARGET_CLASS = 'highlighting';
var CELL_COLOR = 'gray';

var tables = document.body.getElementsByTagName( 'table' );
for( var i = 0; i < tables.length; i++ )
{
    if( tables[ i ].className.indexOf( TARGET_CLASS ) != -1 )
    {
        AttachHighlighting( tables[ i ] );
    }
}


function AttachHighlighting( table )
{
    for( var i = 0; i < table.rows.length; i++ )
    {
        var cells = table.rows[ i ].cells;
        for( var k = 0; k < cells.length; k++ )
        {
            var cell = cells[ k ];
            if( cell.tagName != 'TH' )
            {
                cell.onmouseover = function()
                {
                    var row = this.parentNode;
                    var table = row.parentNode.parentNode;
                    var cols = table.getElementsByTagName( 'col' );

                    for( var i = 0; i < row.cells.length; i++ )
                    {
                        cols[ i ].style.backgroundColor
                            = ( row.cells[ i ] == this )? CELL_COLOR : '';
                    }

                    for( var i = 0; i < table.rows.length; i++ )
                    {
                        table.rows[ i ].style.backgroundColor
                            = ( table.rows[ i ] == row )? CELL_COLOR : '';
                    }
                }
            }
        }
    }

    var colgroups = table.getElementsByTagName( 'colgroup' );
    for( var i = 0; i < colgroups.length; i++ )
    {
        var colgroup = colgroups[ i ];
        var cols = colgroup.getElementsByTagName( 'col' );

        for( var k = cols.length; k < colgroup.span; k++ )
        {
            var col = document.createElement( 'col' );
            colgroup.appendChild( col );
        }
    }

    table.onmouseout = function()
    {
        var cols = this.getElementsByTagName( 'col' );
        for( var i = 0; i < cols.length; i++ )
        {
            cols[ i ].style.backgroundColor = '';
        }

        for( var i = 0; i < this.rows.length; i++ )
        {
            this.rows[ i ].style.backgroundColor = '';
        }
    }
}

連結されたセルを含む場合

上で示したコードでは、連結されたセルを含むとき期待した通りには動作しません。この問題の解決には、jQueryのtableHoverプラグインが参考になります。

下のテーブルに、マウスポインタを合わせてください。

連結されたセルを含む場合
  1 2 3 4 5
1 A   B
2      
3 C        
4   D

CSSだけで実現する方法

行方向にだけ着色するならば、tr要素にCSSの:hover擬似クラスでスタイルを設定することでも実現できます。

tr:hover {
    background-color: gray;
}

下のテーブルに、マウスポインタを合わせてください。

  1 2 3
1      
2      
3      

参考

関連ページ

JavaScriptのドキュメントから検索