DOMでテーブルを操作する１

どのようなアプリケーションでも、クライアントに情報を表示したり、その内容を更新したりする場合、スプレッドシート状の画面が、主流になりがちです。

もちろん、HTMLドキュメントでそのような画面を作成するときは、tableエレメントが活躍します。DOMでは、tableの内容をいろいろと操作するための、多くのAPIが用意されています。

テーブルオブジェクトの構造は？

HTMLのtableエレメントに該当する、DOMのオブジェクトが、HTMLTableElementです。HTMLTableElementオブジェクトから取得できる情報や、直接操作ができる対象は、殆どが行単位のものです。

IDL

interface HTMLTableElement : HTMLElement {

    attribute HTMLTableCaptionElement caption;
              // raises(DOMException) on setting

    attribute HTMLTableSectionElement tHead;
              // raises(DOMException) on setting

    attribute HTMLTableSectionElement tFoot;
              // raises(DOMException) on setting

    readonly attribute HTMLCollection  rows;
    readonly attribute HTMLCollection  tBodies;

    attribute DOMString       align;
    attribute DOMString       bgColor;
    attribute DOMString       border;
    attribute DOMString       cellPadding;
    attribute DOMString       cellSpacing;
    attribute DOMString       frame;
    attribute DOMString       rules;
    attribute DOMString       summary;
    attribute DOMString       width;

    HTMLElement createTHead();
    void        deleteTHead();
    HTMLElement createTFoot();
    void        deleteTFoot();
    HTMLElement createCaption();
    void        deleteCaption();
    HTMLElement insertRow(in long index)
                    raises(DOMException);
    void        deleteRow(in long index)
                    raises(DOMException);
};

rows属性には、当該テーブルの全ての行が、HTMLTableRowElementオブジェクトの集合として、格納されています。

tBodies属性には、tbodyエレメントに該当する内容が、HTMLTableSectionElementオブジェクトの集合として、複数(存在すれば)格納されています。tbodyに行を追加したり、行を削除したりすることは可能ですが、なぜかtbodyそのものを追加削除することは、できないようです。

HTMLTableSectionElementオブジェクトも、行の集合です。操作の対象は、やはり行単位です。

IDL

interface HTMLTableSectionElement : HTMLElement {

    attribute DOMString align;
    attribute DOMString ch;
    attribute DOMString chOff;
    attribute DOMString vAlign;

    readonly attribute HTMLCollection rows;

    HTMLElement insertRow(in long index)
                    raises(DOMException);
    void        deleteRow(in long index)
                    raises(DOMException);
};

rows属性は、HTMLTableElementオブジェクトのrows属性と同じく、HTMLTableRowElementオブジェクトの集合です。また、insertRowメソッドからの戻りも、HTMLTableRowElementオブジェクトとなります。

HTMLTableRowElementオブジェクトは、行を管理するオブジェクトです。HTML上のtrエレメントに該当します。取得できる情報や、操作の対象は、セル単位となります。

IDL

interface HTMLTableRowElement : HTMLElement {

    readonly attribute long           rowIndex;
    readonly attribute long           sectionRowIndex;
    readonly attribute HTMLCollection cells;

    attribute DOMString align;
    attribute DOMString bgColor;
    attribute DOMString ch;
    attribute DOMString chOff;
    attribute DOMString vAlign;

    HTMLElement insertCell(in long index)
                    raises(DOMException);
    void        deleteCell(in long index)
                    raises(DOMException);
};

cells属性は、HTMLTableCellElementオブジェクトの集合です。また、insertCellメソッドからの戻りも、HTMLTableCellElementオブジェクトとなります。

HTMLTableCellElementオブジェクトは、テーブルの一つ一つのセルを現します。HTML上のthエレメントやtdエレメントに該当します。

次のようなHTMLがあるとき、３行行を挿入し、各行に５列のセルを挿入します。そして、各セルに"targetTable.r[行インデックス].c[列インデックス]"形式の、idを設定します。

JavaScript

var tableId = 'targetTable';
var rowCount = 3;
var columnCount = 5;
var targetTable = document.getElementById(tableId);
for (var i = 0; i < rowCount; i ++) {
    var row = targetTable.insertRow(headerCount + i);
    for (var j = 0; j < columnCount; j ++) {
        var cell = row.insertCell(j);
        cell.setAttribute('id', tableId + '.r' + i + '.c' + j);
    }
}

次のスクリプトは、ヘッダ・フッタ以外の行(ボディ部分)を、全て削除します。

JavaScript

var targetTable = document.getElementById(tableId);
var allCount = targetTable.rows.length;
var headerCount = 0;
var footerCount = 0;
if (targetTable.tHead) {
    headerCount = targetTable.tHead.rows.length;
}
if (targetTable.tFoot) {
    footerCount = targetTable.tFoot.rows.length;
}
var bodyLast = allCount - footerCount;
for (var i = headerCount; i < bodyLast; i ++) {
    targetTable.deleteRow(headerCount);
}

次のスクリプトも、ヘッダ・フッタ以外の行(ボディ部分)を、全て削除します。下の行から削除していくのがみそです。但し、上のスクリプトのほうが、ループの回数も少なくてスマート。特定のtbodyエレメントの内容だけを削除する、と云う様な場合は、改造して使えるけど。

JavaScript

var bodiesCount = targetTable.tBodies.length;
for (var i = bodiesCount; i > 0; i --) {
    var bodyItem = targetTable.tBodies.item(i - 1);
    var rowCount = bodyItem.rows.length;
    for (var j = rowCount; j > 0; j --) {
        targetTable.deleteRow(bodyItem.rows.item(j - 1).rowIndex);
    }
}

実験室、其の壱

下のアンカーのいずれかをクリックすると、ここにテーブルが現れます。

うちのねこ紹介。(残念ながら、一部のWebブラウザでは、画像が表示されません。それはそれはカワイイのに･･･)

DOMでテーブルを操作する１。

DOMで、テーブルを操作するには

テーブルオブジェクトの構造は？

実験室、其の壱