テーブル要素について（HTMLTableElement）

・	テーブル要素について
・	テーブル要素を作成する
・	テーブル要素を設定する
・	キャプションの設定について
・	ヘッダの設定について
・	ボディの設定について
・	フッタの設定について
・	行の設定について
・	列の設定について
・	セルの設定について
・	テーブルのソートについて

前のページに戻る

テーブル要素について

■テーブル要素について

<TABLE> タグを使用すると、表を表示できます。

<TABLE> タグを使用して表を表示する


<html>
  <body>

    <table border="1" width="300" >
      <tbody>

        <tr>
          <td>あ</td>
          <td>い</td>
          <td>う</td>
          <td>え</td>
          <td>お</td>
        </tr>

        <tr>
          <td>か</td>
          <td>き</td>
          <td>く</td>
          <td>け</td>
          <td>こ</td>
        </tr>

        <tr>
          <td>さ</td>
          <td>し</td>
          <td>す</td>
          <td>せ</td>
          <td>そ</td>
        </tr>

      </tbody>
    </table>

  </body>
</html>

サンプル表示

■ HTMLTableElement インターフェースについて

HTMLTableElement インターフェースは、<TABLE> タグに相当します。

エレメントの一種です。

表を表示するための機能がまとまっています。

■ HTMLTableElement インターフェースの派生について

HTMLTableElement インターフェースは、以下の様に派生しています。

ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。

Object

↓派生

EventTarget

↓派生

Node

↓派生

Element

↓派生

HTMLElement

↓派生

HTMLTableElement

上に戻る

テーブル要素を作成する

■テーブル要素を動的に作成する

■ HTMLTableElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"table" を指定します。

動的に HTMLTableElement オブジェクトを作成する


// HTMLTableElement オブジェクトを作成する
var element = document.createElement("table");

// 出力テスト
console.log(element);

■テーブル要素をブラウザに表示する

HTMLTableElement オブジェクトを、任意のノードリストに登録します。

テーブル要素を動的に作成して、ブラウザに表示する


// HTMLTableElement オブジェクトを作成する
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

■セクションについて

<THEAD> <TBODY> <TFOOT> 要素は、セクションに該当します。

テーブルを行単位で切り分けて、グループ化します。

セクションごとに、独立したスタイルを設定する事もできます。

テーブル内をセクションで切り分ける


<html>
  <body>

    <table border="1" width="300" >

      <caption>キャプション</caption>

      <thread>
        <tr>
          <th>あ</th>
          <th>い</th>
          <th>う</th>
          <th>え</th>
          <th>お</th>
        </tr>
      </thread>

      <tfoot>
        <tr>
          <td>な</td>
          <td>に</td>
          <td>ぬ</td>
          <td>ね</td>
          <td>の</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <td>か</td>
          <td>き</td>
          <td>く</td>
          <td>け</td>
          <td>こ</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <td>さ</td>
          <td>し</td>
          <td>す</td>
          <td>せ</td>
          <td>そ</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <td>た</td>
          <td>ち</td>
          <td>つ</td>
          <td>て</td>
          <td>と</td>
        </tr>
      </tbody>

    </table>

  </body>
</html>

■静的な <TABLE> タグから、HTMLTableElement オブジェクトを取得する

■任意の要素を取得する

こちらで解説しています。

静的な <TABLE> タグから、HTMLTableElement オブジェクトを取得する


<html>
  <body>

    <table id="aaa" >
      <tbody>
        <tr><td>あいうえお</td></tr>
      </tbody>
    </table>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var table = document.getElementById("aaa");

	// 出力テスト
	console.log(table);

    //-->
    </script>

  </body>
</html>

■ <TBODY> タグの省略について

静的なテーブルは、<TBODY> タグの表記を省略できます。

しかし、DOM 上では、<TBODY> 要素が省略される事はありません。

<TBODY> 要素は、必ず補充生成されます。

上に戻る

テーブル要素を設定する

■テーブル要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
width	String	(width 属性と同等) テーブルの幅を設定
bgColor	String	(bgcolor 属性と同等) 背景カラーを設定
border	String	(border 属性と同等) テーブルの外周線の太さを設定
frame	String	(frame 属性と同等) テーブルの外周線のルールを設定
rules	String	(rules 属性と同等) テーブル内の線ルールを設定
cellPadding	String	(cellpadding 属性と同等) セルの内周余白量を設定
cellSpacing	String	(cellspacing 属性と同等) セルの外周余白量を設定
summary	String	(summary 属性と同等) 概要を設定

■設定例

テーブル要素を設定する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// 適当なテーブルを構築する
// ------------------------------------------------------------
// 行要素を追加
var tr0 = table.insertRow(-1);
var tr1 = table.insertRow(-1);
// セルを追加
var td0 = tr0.insertCell(-1);
var td1 = tr0.insertCell(-1);
var td2 = tr1.insertCell(-1);
var td3 = tr1.insertCell(-1);
// セルを編集
td0.innerHTML = "あ";
td1.innerHTML = "い";
td2.innerHTML = "う";
td3.innerHTML = "え";

// ------------------------------------------------------------
// テーブルの設定
// ------------------------------------------------------------
// テーブルの幅を設定
table.width = "200";

// 背景カラーを設定
table.bgColor = "#ffcc00";

// テーブルの外周線の太さを設定
table.border = "2";

// テーブルの外周線のルールを設定
table.frame = "box";

// テーブル内の線ルールを設定
table.rules = "all";

// セルの内周余白量を設定
table.cellPadding = "4";

// セルの外周余白量を設定
table.cellSpacing = "0";

// 概要を設定
table.summary = "";

■テーブルの外周線のルールを設定する

frame プロパティを使用します。

以下の定数を指定できます。

定数	説明
"void"	外周線すべてなし
"box" "border"	外周線すべてあり

定数	説明
"above"	上側のみあり
"below"	下側のみあり
"lhs"	左側のみあり
"rhs"	右側のみあり
"hsides"	上側と下側のみあり
"vsides"	左側と右側のみあり

■テーブル内の線ルールを設定する

rules プロパティを使用します。

以下の定数を指定できます。

定数	説明
"all"	セル単位（すべて）
"rows"	行単位（横線のみ）
"cols"	列単位（縦線のみ）
"groups"	グループ単位（TBODY、THEAD、TFOOT、COLGROUP 要素）
"none"	なし

上に戻る

キャプションの設定について

■ <CAPTION> 要素を追加する

createCaption() メソッドを使用します。

ノードリストへの登録も同時に行われます。

HTMLTableElement.createCaption( ) :HTMLElement

第01引数	Void	なし
戻り値	HTMLElement	新しい HTMLTableCaptionElement オブジェクトが得られる。

■戻り値（HTMLTableCaptionElement）

HTMLTableCaptionElement オブジェクトが生成されます。

キャプションを編集する方法は、こちらで解説しています。

<CAPTION> 要素は、１つしか存在できません。

２つ目の作成を試みた場合、既存のキャプション要素が得られます。

■作成例

テーブルにキャプション要素を追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにキャプション要素を追加する（HTMLTableCaptionElement オブジェクト）
// ------------------------------------------------------------
var caption = table.createCaption();

// 出力テスト
console.log(caption);

■ <CAPTION> 要素を削除する

deleteCaption() メソッドを使用します。

キャプション要素が存在しない場合、何も起こりません。

この場合、エラーは発生しません。

HTMLTableElement.deleteCaption( ) :Void

第01引数(略可)	Void	なし
戻り値	Void	なし

■使用例

テーブルからキャプションを削除する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにキャプション要素を追加する
// ------------------------------------------------------------
table.createCaption();

// ------------------------------------------------------------
// テーブルからキャプション要素を削除する
// ------------------------------------------------------------
table.deleteCaption();

■ <CAPTION> 要素を取得する

caption プロパティを使用します。

HTMLTableCaptionElement オブジェクトが得られます。

キャプション要素が存在しない場合、null 値が得られます。

■使用例

テーブルからキャプション要素を取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにキャプション要素を追加する
// ------------------------------------------------------------
table.createCaption();

// ------------------------------------------------------------
// テーブルからキャプション要素を取得する
// ------------------------------------------------------------
var caption = table.caption;

// 出力テスト
console.log(caption);

■キャプションを編集する

■「HTML 文字列」を指定して、DOM ツリーを構築する

innerHTML プロパティを使用します。

キャプションの DOM ツリーを構築する（innerHTML プロパティ）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにキャプション要素を追加する
// ------------------------------------------------------------
var caption = table.createCaption();

// ------------------------------------------------------------
// 「HTML 文字列」を指定して、DOM ツリーを構築する
// ------------------------------------------------------------
caption.innerHTML = '<span>私は表題です</span>';

■ DOM API を使用する

DOM API を使って、DOM ツリーを構築します。

DOM API については、こちらで解説しています。

キャプションの DOM ツリーを構築する（DOM API）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにキャプション要素を追加する
// ------------------------------------------------------------
var caption = table.createCaption();

// ------------------------------------------------------------
// HTMLSpanElement オブジェクトを作成する
// ------------------------------------------------------------
var span = document.createElement("span");

// CAPTION 要素のノードリストに登録する
caption.appendChild(span);

// ------------------------------------------------------------
// テキストノードオブジェクトを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode('私は表題です');

// SPAN 要素のノードリストに登録する
span.appendChild(text_node);

上に戻る

ヘッダの設定について

■ <THEAD> 要素を追加する

createTHead() メソッドを使用します。

ノードリストへの登録も同時に行われます。

HTMLTableElement.createTHead( ) :HTMLElement

第01引数	Void	なし
戻り値	HTMLElement	新しい HTMLTableSectionElement オブジェクトが得られる。

■戻り値（HTMLTableSectionElement）

HTMLTableSectionElement オブジェクトが生成されます。

テーブルの行を編集する API などが、利用できます。

<THEAD> 要素は、１つしか存在できません。

２つ目の作成を試みた場合、既存の <THEAD> 要素が得られます。

■作成例

テーブルにヘッダセクションを追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにヘッダセクションを追加する（THEAD 要素）
// ------------------------------------------------------------
var thead = table.createTHead();

// 出力テスト
console.log(thead);

■ <THEAD> 要素を削除する

deleteTHead() メソッドを使用します。

<THEAD> 要素が存在しない場合、何も起こりません。

この場合、エラーは発生しません。

HTMLTableElement.deleteTHead( ) :Void

第01引数(略可)	Void	なし
戻り値	Void	なし

■使用例

テーブルからヘッダセクションを削除する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにヘッダセクションを追加する
// ------------------------------------------------------------
table.createTHead();

// ------------------------------------------------------------
// テーブルからヘッダセクションを削除する
// ------------------------------------------------------------
table.deleteTHead();

■ <THEAD> 要素を取得する

tHead プロパティを使用します。

HTMLTableSectionElement オブジェクトが得られます。

<THEAD> 要素が存在しない場合、null 値が得られます。

■使用例

テーブルからヘッダセクションを取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにヘッダセクションを追加する
// ------------------------------------------------------------
table.createTHead();

// ------------------------------------------------------------
// テーブルからヘッダセクションを取得する
// ------------------------------------------------------------
var thead = table.tHead;

// 出力テスト
console.log(thead);

上に戻る

<TH> 要素について

■ <TH> 要素を追加する

■ <TH> 要素を設定する

■ <TH> 要素を編集する

■ <TH> 要素を使ったヘッダについて

<TH> 要素を使って、テーブルヘッダを表現する事もできます。

■列ヘッダの場合

<TH> タグを使用して行ヘッダを表示する


<html>
  <body>

    <table border="1" width="400" >

      <thead>
        <tr bgcolor="#e0e0e0">
          <th colspan="2" scope="colgroup">学籍</th>
          <th colspan="4" scope="colgroup">教科</th>
        </tr>

        <tr bgcolor="#f0f0f0">
          <th scope="col">番号</th>
          <th scope="col">名前</th>
          <th scope="col">国語</th>
          <th scope="col">算数</th>
          <th scope="col">社会</th>
          <th scope="col">理科</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>太郎</td>
          <td>92</td>
          <td>53</td>
          <td>49</td>
          <td>34</td>
        </tr>

        <tr>
          <td>2</td>
          <td>花子</td>
          <td>81</td>
          <td>95</td>
          <td>29</td>
          <td>38</td>
        </tr>

        <tr>
          <td>3</td>
          <td>三郎</td>
          <td>33</td>
          <td>43</td>
          <td>48</td>
          <td>84</td>
        </tr>
      </tbody>

    </table>

  </body>
</html>

サンプル表示

学籍	教科
1	太郎	92	53	49	34
2	花子	81	95	29	38
3	三郎	33	43	48	84

■行ヘッダの場合

<TH> タグを使用して行ヘッダを表示する


<html>
  <body>

    <table border="1" width="400" >

      <colgroup span="2">
        <col span="1" bgcolor="#e0e0e0">
        <col span="1" bgcolor="#f0f0f0">
      </colgroup>
      <colgroup span="4"></colgroup>

      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">学籍</th>
          <th scope="row">番号</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>

        <tr>
          <th scope="row">名前</th>
          <td>太郎</td>
          <td>花子</td>
          <td>三郎</td>
        </tr>

        <tr>
          <th rowspan="4" scope="rowgroup">教科</th>
          <th scope="row">国語</th>
          <td>92</td>
          <td>81</td>
          <td>33</td>
        </tr>

        <tr>
          <th scope="row">算数</th>
          <td>53</td>
          <td>95</td>
          <td>43</td>
        </tr>

        <tr>
          <th scope="row">社会</th>
          <td>49</td>
          <td>29</td>
          <td>48</td>
        </tr>

        <tr>
          <th scope="row">理科</th>
          <td>34</td>
          <td>38</td>
          <td>84</td>
        </tr>
      </tbody>

    </table>

  </body>
</html>

サンプル表示

学籍	番号	1	2	3
名前	太郎	花子	三郎
教科	国語	92	81	33
算数	53	95	43
社会	49	29	48
理科	34	38	84

■ <TH> 要素を追加する

１．行要素を追加する

こちらで解説しています。

２．<TH> 要素を作成する

document.createElement() メソッドを使用します。

引数に、"th" を指定します。

新しい HTMLTableHeaderCellElement オブジェクトが得られます。

これは、HTMLTableCellElement を継承しています。

ヘッダセルを編集する方法は、こちらで解説しています。

３．<TH> 要素をノードリストに登録する

こちらで解説しています。

■作成例

ヘッダセルを追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr0 = tbody.insertRow(-1);
var tr1 = tbody.insertRow(-1);

// ------------------------------------------------------------
// ヘッダセル要素を追加する（TH 要素）
// ------------------------------------------------------------
var th0 = document.createElement("th");
var th1 = document.createElement("th");

// TR 要素のノードリストに登録（最後尾）
tr0.appendChild(th0);
tr0.appendChild(th1);

// ------------------------------------------------------------
// セルを追加する（TD 要素）
// ------------------------------------------------------------
var td0 = tr1.insertCell(-1);
var td1 = tr1.insertCell(-1);

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(th0);
console.log(th1);
console.log(table.outerHTML);

■ <TH> 要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
abbr	String	(abbr 属性と同等) 略された短い説明文を設定
scope	String	(scope 属性と同等) ヘッダに該当するデータの範囲を設定
colSpan	Number	セルを一体化する水平方向の個数。デフォルトは 1
rowSpan	Number	セルを一体化する垂直方向の個数。デフォルトは 1

■ヘッダに該当するデータの範囲を設定する

scope プロパティを使用します。

以下の定数を指定できます。

アクセシビリティの一種です。

定数	説明
"col"	列ヘッダ（自身から縦方向のセルがデータの範囲）
"row"	行ヘッダ（自身から横方向のセルがデータの範囲）
"colgroup"	グループ化された列ヘッダ（colspan 属性によって）
"rowgroup"	グループ化された行ヘッダ（rowspan 属性によって）
"auto"

■ <TH> 要素を編集する

■「HTML 文字列」を指定して、DOM ツリーを構築する

innerHTML プロパティを使用します。

ヘッダセルの DOM ツリーを構築する（innerHTML プロパティ）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// ヘッダセル要素を追加する（TH 要素）
// ------------------------------------------------------------
var th = document.createElement("th");

// TR 要素のノードリストに登録（最後尾）
tr.appendChild(th);

// ------------------------------------------------------------
// 「HTML 文字列」を指定して、DOM ツリーを構築する
// ------------------------------------------------------------
th.innerHTML = '<span>私はヘッダセルです</span>';

■ DOM API を使用する

DOM API を使って、DOM ツリーを構築します。

DOM API については、こちらで解説しています。

ヘッダセルの DOM ツリーを構築する（DOM API）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// ヘッダセル要素を追加する（TH 要素）
// ------------------------------------------------------------
var th = document.createElement("th");

// TR 要素のノードリストに登録（最後尾）
tr.appendChild(th);

// ------------------------------------------------------------
// HTMLSpanElement オブジェクトを作成する
// ------------------------------------------------------------
var span = document.createElement("span");

// TH 要素のノードリストに登録する
th.appendChild(span);

// ------------------------------------------------------------
// テキストノードオブジェクトを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode('私はヘッダセルです');

// SPAN 要素のノードリストに登録する
span.appendChild(text_node);

上に戻る

ボディの設定について

■ <TBODY> 要素を追加する（DOM API）

■ <TBODY> 要素を追加する（HTML5 世代）

■ <TBODY> 要素を削除する（DOM API）

■ <TBODY> 要素を取得する（位置指定）

■ <TBODY> 要素を追加する（DOM API）

■ HTMLTableSectionElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"tbody" を指定します。

新しい HTMLTableSectionElement オブジェクトが得られます。

テーブルの行を編集する API などが、利用できます。

■ <TBODY> 要素をノードリストに登録する

こちらで解説しています。

<TABLE> 要素のノードリストに登録します。

■ノードリストの登録順について

<TBODY> 要素は、最後尾に登録するのが無難です。

HTML4.01 の仕様では、以下の順序で配置する必要があります。

■作成例

テーブルにボディセクションを追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// TBODY 要素を作成する（HTMLTableSectionElement オブジェクト）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// テーブル要素のノードリストに登録する
table.appendChild(tbody);

■ <TBODY> 要素を追加する（HTML5 世代）

createTBody() メソッドを使用する方法もあります。

ノードリストへの登録も同時に行われます。

HTML5 対応ブラウザで動作します。

<TABLE> 要素がノードリストに登録済みの状態で呼び出します。

HTMLTableElement.createTBody( ) :HTMLElement

第01引数	Void	なし
戻り値	HTMLElement	新しい HTMLTableSectionElement オブジェクトが得られる。

■戻り値（HTMLTableSectionElement）

HTMLTableSectionElement オブジェクトが生成されます。

テーブルの行を編集する API などが、利用できます。

■ <TBODY> 要素を複数作成した場合

<TBODY> 要素は、複数作成する事ができます。

最後尾の <TBODY> 要素の直後に、作成した <TBODY> 要素が配置されます。

■作成例

テーブルにボディセクションを追加する (HTML5 世代)


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody0 = table.createTBody();
var tbody1 = table.createTBody();

// 出力テスト
console.log(tbody0);
console.log(tbody1);

■ <TBODY> 要素を削除する

deleteTBody() メソッドは、存在しません。

かわりに、こちらの方法で除外します。

■ <TBODY> 要素を削除する（DOM API）

■任意の <TBODY> 要素を取得する

こちらで解説しています。

■要素をノードリストから除外する

こちらで解説しています。

任意の要素は、自殺的に除外できます。

■ <TBODY> 要素を取得する（位置指定）

■ <TBODY> 要素のリストを取得する

tBodies プロパティを使用します。

HTMLCollection オブジェクトが得られます。

■ HTMLCollection オブジェクトについて

HTMLCollection オブジェクトは、配列のように中身を取り出せます。

中には、HTMLTableSectionElement オブジェクトが格納されています。

■使用例

任意の位置にある TBODY 要素を取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody0 = document.createElement("tbody");
var tbody1 = document.createElement("tbody");
var tbody2 = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody0);
table.appendChild(tbody1);
table.appendChild(tbody2);

// ------------------------------------------------------------
// TBODY 要素のリストを取得する
// ------------------------------------------------------------
var tbody_list = table.tBodies;

// 総数を取得する
var tbody_num = tbody_list.length;

// ------------------------------------------------------------
// 位置を指定して、TBODY 要素を取得する
// ------------------------------------------------------------
var tbody0 = tbody_list[0];
var tbody1 = tbody_list[1];
var tbody2 = tbody_list[2];

// 出力テスト
console.log(tbody0);
console.log(tbody1);
console.log(tbody2);
console.log(table.outerHTML);

上に戻る

フッタの設定について

■ <TFOOT> 要素を追加する

■ <TFOOT> 要素を削除する

■ <TFOOT> 要素を取得する

■ <TFOOT> 要素を追加する

createTFoot() メソッドを使用します。

ノードリストへの登録も同時に行われます。

HTMLTableElement.createTFoot( ) :HTMLElement

第01引数	Void	なし
戻り値	HTMLElement	新しい HTMLTableSectionElement オブジェクトが得られる。

■戻り値（HTMLTableSectionElement）

HTMLTableSectionElement オブジェクトが生成されます。

テーブルの行を編集する API などが、利用できます。

<TFOOT> 要素は、１つしか存在できません。

２つ目の作成を試みた場合、既存の <TFOOT> 要素が得られます。

■作成例

テーブルにフッタセクションを追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにフッタセクションを追加する（TFOOT 要素）
// ------------------------------------------------------------
var tfoot = table.createTFoot();

// 出力テスト
console.log(tfoot);

■ <TFOOT> 要素を削除する

deleteTFoot() メソッドを使用します。

<TFOOT> 要素が存在しない場合、何も起こりません。

この場合、エラーは発生しません。

HTMLTableElement.deleteTFoot( ) :Void

第01引数(略可)	Void	なし
戻り値	Void	なし

■使用例

テーブルからフッタセクションを削除する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにフッタセクションを追加する
// ------------------------------------------------------------
table.createTFoot();

// ------------------------------------------------------------
// テーブルからフッタセクションを削除する
// ------------------------------------------------------------
table.deleteTFoot();

■ <TFOOT> 要素を取得する

tFoot プロパティを使用します。

HTMLTableSectionElement オブジェクトが得られます。

<TFOOT> 要素が存在しない場合、null 値が得られます。

■使用例

テーブルからフッタセクションを取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// テーブルにフッタセクションを追加する
// ------------------------------------------------------------
table.createTFoot();

// ------------------------------------------------------------
// テーブルからフッタセクションを取得する
// ------------------------------------------------------------
var tfoot = table.tFoot;

// 出力テスト
console.log(tfoot);

上に戻る

行の設定について

■行要素を追加する（位置指定）

insertRow() メソッドを使用します。

<TABLE> <THEAD> <TBODY> <TFOOT> に相当する要素から呼び出します。

(HTMLTableElement or HTMLTableSectionElement).insertRow( index ) :HTMLElement

第01引数(略可)	Number	挿入位置を指定。-1 で最後尾に追加。（デフォルトは -1）
戻り値	HTMLElement	新しい HTMLTableRowElement オブジェクトが得られる。

■第01引数（挿入位置）

指定した位置に、すでに行が存在する場合、割り込み挿入となります。

-1 値を指定した場合、最後尾に追加されます。

HTML5 の仕様では、引数は省略可能です。

Opera(Presto 版) では、引数を省略できません。

■戻り値（HTMLTableRowElement）

HTMLTableRowElement オブジェクトが生成されます。

これは、<TR> 要素に相当します。

ブラウザによっては、作成に失敗する事があります。

InternetExplorer 7 以前では、セクションは、<TABLE> 要素に接続済みである必要があります。

■ <TABLE> 要素から呼び出した場合

セクションや行が存在しない場合、<TBODY> 要素が自動的に追加されます。

セクションが存在する場合、最後尾のセクションが親となります。

行要素だけが存在する場合、<TABLE> 要素が親となります。

■セクションから呼び出した場合

挿入範囲は、自身のセクション内に限定されます。

■使用例

HTMLTableRowElement オブジェクトを追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr0 = tbody.insertRow(-1);
var tr1 = tbody.insertRow(-1);
var tr2 = tbody.insertRow(-1);

// 出力テスト
console.log(tr0);
console.log(tr1);
console.log(tr2);
console.log(table.outerHTML);

■セルを表示する

さらに、<TH> <TD> 要素などの追加が必要です。

セルの設定については、こちらで解説しています。

■行要素を追加する（DOM API）

■ HTMLTableRowElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"tr" を指定します。

■作成した行要素を、ノードリストに登録する

こちらで解説しています。

通常は、セクションのノードリストに登録します。

■ <TABLE> 要素への登録について

<TABLE> 要素にも登録できますが、これは避けた方がいいでしょう。

ブラウザによっては、動作が異なります。

Internet Explorer 8 以前では、<TBODY> 要素を省略できません。

静的な <TABLE> タグや、insertRow() メソッドは、<TBODY> 要素を省略していたとしても、含まれるように自動的に補正されます。

■作成例

HTMLTableRowElement オブジェクトを追加する（DOM API）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr0 = document.createElement("tr");
var tr1 = document.createElement("tr");
var tr2 = document.createElement("tr");

// TBODY 要素のノードリストに登録（最後尾）
tbody.appendChild(tr0);
tbody.appendChild(tr1);
tbody.appendChild(tr2);

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(tr0);
console.log(tr1);
console.log(table.outerHTML);

■行要素を削除する（位置指定）

deleteRow() メソッドを使用します。

<TABLE> <THEAD> <TBODY> <TFOOT> に相当する要素から呼び出します。

(HTMLTableElement or HTMLTableSectionElement).deleteRow( index ) :Void

第01引数	Number	削除位置を指定。-1 で最後尾を削除
戻り値	Void	なし

■第01引数（削除位置）

指定した位置に、行が存在しない場合、エラーとなります。

-1 値を指定した場合、最後尾の行が削除されます。

HTML5 の仕様では、引数は省略できません。

■ <TABLE> 要素から呼び出した場合

テーブル内のすべての行要素が、削除対象となります。

■セクションから呼び出した場合

削除範囲は、セクション内に限定されます。

■使用例

行要素を削除する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr0 = tbody.insertRow(-1);
var tr1 = tbody.insertRow(-1);
var tr2 = tbody.insertRow(-1);

// 出力テスト
console.log(table.outerHTML);

// ------------------------------------------------------------
// 行要素を削除する（TR 要素）
// ------------------------------------------------------------
tbody.deleteRow(-1);
tbody.deleteRow(-1);
tbody.deleteRow(-1);

// 出力テスト
console.log(table.outerHTML);

■行要素を削除する（DOM API）

■任意の行要素を取得する

こちらで解説しています。

■要素をノードリストから除外する

こちらで解説しています。

任意の要素は、自殺的に除外できます。

■行要素を取得する（位置指定）

■行要素のリストを取得する

rows プロパティを使用します。

HTMLCollection オブジェクトが得られます。

■ HTMLCollection オブジェクトについて

HTMLCollection オブジェクトは、配列のように中身を取り出せます。

中には、HTMLTableRowElement オブジェクトが格納されています。

■ <TABLE> 要素からアクセスした場合

テーブル内のすべての行要素が、取得対象となります。

■セクションからアクセスした場合

取得範囲は、セクション内に限定されます。

■使用例

任意の位置にある行要素を取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
tbody.insertRow(-1);
tbody.insertRow(-1);
tbody.insertRow(-1);

// ------------------------------------------------------------
// 行要素のリストを取得する
// ------------------------------------------------------------
var row_list = table.rows;

// 総数を取得する
var row_num = row_list.length;

// ------------------------------------------------------------
// 位置を指定して、行要素を取得する
// ------------------------------------------------------------
var tr0 = row_list[0];
var tr1 = row_list[1];
var tr2 = row_list[2];

// 出力テスト
console.log(tr0);
console.log(tr1);
console.log(tr2);
console.log(table.outerHTML);

■行要素から自身の行位置を取得する

以下のプロパティを使用します。

rowIndex プロパティの値は、テーブルの行位置と一致します。

プロパティ名	型	説明
rowIndex	Number	自身の行位置を取得する（テーブル全体）
sectionRowIndex	Number	自身の行位置を取得する（セクション内に限定）

上に戻る

列の設定について

■ <COLGROUP> 要素を追加する

■ HTMLTableColElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"colgroup" を指定します。

HTMLTableColElement オブジェクトが得られます。

■作成した行要素を、ノードリストに登録する

こちらで解説しています。

<TABLE> 要素のノードリストに登録します。

<CAPTION> 要素よりも、以降に配置する必要があります。

セクションよりも、以前に配置する必要があります。

■作成例

テーブルに COLGROUP 要素を追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// テーブルの外周線の太さを設定
table.border = "1";

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// カラムグループを作成する（COLGROUP 要素）
// ------------------------------------------------------------
var colgroup0 = document.createElement("colgroup");
var colgroup1 = document.createElement("colgroup");
var colgroup2 = document.createElement("colgroup");

// ------------------------------------------------------------
// カラムグループを、CAPTION 要素の直後に登録（無ければ TABLE 要素の最先頭）
// ------------------------------------------------------------
var reference_node = table.firstChild;
if(table.caption) reference_node = table.caption.nextSibling;

table.insertBefore( colgroup0 , reference_node );
table.insertBefore( colgroup1 , colgroup0.nextSibling );
table.insertBefore( colgroup2 , colgroup1.nextSibling );

// ------------------------------------------------------------
// カラムグループの有効範囲を設定する
// ------------------------------------------------------------
colgroup0.span = 1;
colgroup1.span = 2;
colgroup2.span = 2;

// ------------------------------------------------------------
// カラムグループのスタイルを設定する
// ------------------------------------------------------------
colgroup0.style.cssText = "background:#ffdddd;";
colgroup1.style.cssText = "background:#ddffdd;";
colgroup2.style.cssText = "background:#ddddff;";

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 適当なセルを用意する
// ------------------------------------------------------------
var i,j;
var code = 65;
var col_num = 5;
var row_num = 4;
for(j=0;j < row_num;j++){

	// ------------------------------------------------------------
	// 行要素を追加する（TR 要素）
	// ------------------------------------------------------------
	var tr = tbody.insertRow(-1);

	for(i=0;i < col_num;i++){

		// ------------------------------------------------------------
		// セルを追加する（TD 要素）
		// ------------------------------------------------------------
		var td = tr.insertCell(-1);

		// セルを編集する
		td.innerHTML = String.fromCharCode(code);
		code ++;
	}
}

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(table.outerHTML);

■ <COLGROUP> 要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
span	Number	有効範囲となる列の個数を設定する。デフォルトは 1

■ <COL> 要素を追加する

■ HTMLTableColElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"col" を指定します。

HTMLTableColElement オブジェクトが得られます。

■作成した行要素を、ノードリストに登録する

こちらで解説しています。

<COLGROUP> 要素のノードリストに登録します。

■作成例

テーブルに COL 要素を追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// テーブルの外周線の太さを設定
table.border = "1";

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// カラムグループを作成する（COLGROUP 要素）
// ------------------------------------------------------------
var colgroup0 = document.createElement("colgroup");
var colgroup1 = document.createElement("colgroup");
var colgroup2 = document.createElement("colgroup");

// ------------------------------------------------------------
// カラムグループを、CAPTION 要素の直後に登録（無ければ TABLE 要素の最先頭）
// ------------------------------------------------------------
var reference_node = table.firstChild;
if(table.caption) reference_node = table.caption.nextSibling;

table.insertBefore( colgroup0 , reference_node );
table.insertBefore( colgroup1 , colgroup0.nextSibling );
table.insertBefore( colgroup2 , colgroup1.nextSibling );

// ------------------------------------------------------------
// カラム要素を作成する（COL 要素）
// ------------------------------------------------------------
var col0 = document.createElement("col");
var col1 = document.createElement("col");
var col2 = document.createElement("col");

// ------------------------------------------------------------
// カラムグループにカラム要素を登録する
// ------------------------------------------------------------
colgroup1.appendChild(col0);
colgroup2.appendChild(col1);
colgroup2.appendChild(col2);

// ------------------------------------------------------------
// カラムの有効範囲を設定する
// ------------------------------------------------------------
colgroup0.span = 1;
col0.span = 2;
col1.span = 1;
col2.span = 1;

// ------------------------------------------------------------
// カラムのスタイルを設定する
// ------------------------------------------------------------
colgroup0.style.cssText = "background:#ffdddd;";
col0.style.cssText = "background:#ddffdd;";
col1.style.cssText = "background:#ddddff;";
col2.style.cssText = "background:#ffddff;";

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 適当なセルを用意する
// ------------------------------------------------------------
var i,j;
var code = 65;
var col_num = 5;
var row_num = 4;
for(j=0;j < row_num;j++){

	// ------------------------------------------------------------
	// 行要素を追加する（TR 要素）
	// ------------------------------------------------------------
	var tr = tbody.insertRow(-1);

	for(i=0;i < col_num;i++){

		// ------------------------------------------------------------
		// セルを追加する（TD 要素）
		// ------------------------------------------------------------
		var td = tr.insertCell(-1);

		// セルを編集する
		td.innerHTML = String.fromCharCode(code);
		code ++;
	}
}

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(table.outerHTML);

■ <COL> 要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
span	Number	有効範囲となる列の個数を設定する。デフォルトは 1

上に戻る

セルの設定について

■セル要素を追加する（位置指定）

■ <TR> 要素を追加する

こちらで解説しています。

■セル要素を追加する

insertCell() メソッドを使用します。

<TR> 要素から呼び出します。

HTMLTableRowElement.insertCell( index ) :HTMLElement

第01引数(略可)	Number	挿入位置を指定。-1 で最後尾に追加。（デフォルトは -1）
戻り値	HTMLElement	新しい HTMLTableCellElement オブジェクトが得られる。

■第01引数（挿入位置）

指定した位置に、すでにセルが存在する場合、割り込み挿入となります。

-1 値を指定した場合、最後尾に追加されます。

HTML5 の仕様では、引数は省略可能です。

Opera(Presto 版) では、引数を省略できません。

■戻り値（HTMLTableCellElement）

HTMLTableCellElement オブジェクトが生成されます。

これは、<TD> 要素に相当します。

セルを編集する方法は、こちらで解説しています。

ブラウザによっては、作成に失敗する事があります。

InternetExplorer 7 以前では、行要素は、<TABLE> 要素に接続済みである必要があります。

■使用例

セル要素を追加する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
var td0 = tr.insertCell(-1);
var td1 = tr.insertCell(-1);
var td2 = tr.insertCell(-1);

// 出力テスト
console.log(td0);
console.log(td1);
console.log(td2);
console.log(table.outerHTML);

■セルにコンテンツを表示する

こちらで解説しています。

■セル要素を追加する（DOM API）

■ <TR> 要素を追加する

こちらで解説しています。

■ HTMLTableCellElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"td" や "th" を指定します。

HTMLTableCellElement オブジェクトが生成されます。

セルを編集する方法は、こちらで解説しています。

■作成したセル要素を、ノードリストに登録する

こちらで解説しています。

<TR> 要素のノードリストに登録します。

■作成例

HTMLTableCellElement オブジェクトを追加する（DOM API）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr0 = tbody.insertRow(-1);
var tr1 = tbody.insertRow(-1);

// ------------------------------------------------------------
// ヘッダセル要素を追加する（TH 要素）
// ------------------------------------------------------------
var th0 = document.createElement("th");
var th1 = document.createElement("th");
var th2 = document.createElement("th");

// TR 要素のノードリストに登録（最後尾）
tr0.appendChild(th0);
tr0.appendChild(th1);
tr0.appendChild(th2);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");

// TR 要素のノードリストに登録（最後尾）
tr1.appendChild(td0);
tr1.appendChild(td1);
tr1.appendChild(td2);

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(th0);
console.log(th1);
console.log(th2);
console.log(td0);
console.log(td1);
console.log(td2);
console.log(table.outerHTML);

■セル要素を削除する（位置指定）

deleteCell() メソッドを使用します。

<TR> 要素から呼び出します。

HTMLTableRowElement.deleteCell( index ) :Void

第01引数	Number	削除位置を指定。-1 で最後尾を削除
戻り値	Void	なし

■第01引数（削除位置）

指定した位置に、セルが存在しない場合、エラーとなります。

-1 値を指定した場合、最後尾のセルが削除されます。

HTML5 の仕様では、引数は省略できません。

■使用例

セル要素を削除する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
var td0 = tr.insertCell(-1);
var td1 = tr.insertCell(-1);
var td2 = tr.insertCell(-1);

// 出力テスト
console.log(table.outerHTML);

// ------------------------------------------------------------
// セル要素を削除する（TD 要素）
// ------------------------------------------------------------
tr.deleteCell(-1);
tr.deleteCell(-1);
tr.deleteCell(-1);

// 出力テスト
console.log(table.outerHTML);

■セル要素を削除する（DOM API）

■任意のセル要素を取得する

こちらで解説しています。

■要素をノードリストから除外する

こちらで解説しています。

任意の要素は、自殺的に除外できます。

■セル要素を取得する（位置指定）

■セル要素のリストを取得する

cells プロパティを使用します。

HTMLCollection オブジェクトが得られます。

■ HTMLCollection オブジェクトについて

HTMLCollection オブジェクトは、配列のように中身を取り出せます。

中には、HTMLTableCellElement オブジェクトが格納されています。

■使用例

任意の位置にあるセル要素を取得する


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する（TABLE 要素）
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY 要素のノードリストに登録（最後尾）
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
tr.insertCell(-1);
tr.insertCell(-1);
tr.insertCell(-1);

// ------------------------------------------------------------
// 行要素のリストを取得する
// ------------------------------------------------------------
var cell_list = tr.cells;

// 総数を取得する
var cell_num = cell_list.length;

// ------------------------------------------------------------
// 位置を指定して、行要素を取得する
// ------------------------------------------------------------
var td0 = cell_list[0];
var td1 = cell_list[1];
var td2 = cell_list[2];

// 出力テスト
console.log(td0);
console.log(td1);
console.log(td2);
console.log(table.outerHTML);

■セル要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
colSpan	Number	セルを一体化する水平方向の個数。デフォルトは 1
rowSpan	Number	セルを一体化する垂直方向の個数。デフォルトは 1

■セル要素を編集する

■「HTML 文字列」を指定して、DOM ツリーを構築する

innerHTML プロパティを使用します。

セルの DOM ツリーを構築する（innerHTML プロパティ）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
var td = tr.insertCell(-1);

// ------------------------------------------------------------
// 「HTML 文字列」を指定して、DOM ツリーを構築する
// ------------------------------------------------------------
td.innerHTML = '<span>私はセルです</span>';

■ DOM API を使用する

DOM API を使って、DOM ツリーを構築します。

DOM API については、こちらで解説しています。

セルの DOM ツリーを構築する（DOM API）


// ------------------------------------------------------------
// HTMLTableElement オブジェクトを作成する
// ------------------------------------------------------------
var table = document.createElement("table");

// BODY のノードリストに登録する
document.body.appendChild(table);

// ------------------------------------------------------------
// ボディセクションを追加する（TBODY 要素）
// ------------------------------------------------------------
var tbody = document.createElement("tbody");

// TABLE 要素のノードリストに登録（最後尾）
table.appendChild(tbody);

// ------------------------------------------------------------
// 行要素を追加する（TR 要素）
// ------------------------------------------------------------
var tr = tbody.insertRow(-1);

// ------------------------------------------------------------
// セル要素を追加する（TD 要素）
// ------------------------------------------------------------
var td = tr.insertCell(-1);

// ------------------------------------------------------------
// HTMLSpanElement オブジェクトを作成する
// ------------------------------------------------------------
var span = document.createElement("span");

// TD 要素のノードリストに登録する
td.appendChild(span);

// ------------------------------------------------------------
// テキストノードオブジェクトを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode('私はセルです');

// SPAN 要素のノードリストに登録する
span.appendChild(text_node);

■セル要素から自身の位置を取得する

■セル要素リスト内での、自身の格納位置を取得する

cellIndex プロパティを使用します。

セル要素リストを取得するには、cells プロパティを使用します。

これは、テーブルの列の位置を意味するとは限りません。

colspan や rowspan 属性によって、テーブルの列位置は変動します。

■セル要素からテーブルの行列位置を取得する関数

第01引数に、テーブル要素かセクションを指定します。

第02引数に、セル要素を指定します。

戻り値から、位置オブジェクトが得られます。{ x , y }

セル要素からテーブルの行列位置を取得する関数


// ------------------------------------------------------------
// セル要素からテーブルの行列位置を取得する関数
// ------------------------------------------------------------
function TableElement_Get_CellPosition(tableElement , cellElement){
	var map = new Array();
	var i,j,p,x,y,x_end,y_end;
	var parent;
	var row;
	var rows = tableElement.rows;
	var row_num = rows.length;
	var cell;
	var cells;
	var cell_num;
	if(!row_num) return null;

	for(j=0;j < row_num;j++){
		p = 0;
		row = rows[j];
		if(parent != row.parentNode){
			parent = row.parentNode;
			for(y=j;rows[y];y++){
				if(parent != rows[y].parentNode) break;
				map[y] = new Array();
			}
		}

		cells = row.cells;
		cell_num = cells.length;
		for(i=0;i < cell_num;i++){
			cell = cells[i];
			while(map[j][p]){ p += 1; }
			if(cell === cellElement) return {x:p,y:j};

			x_end = p + cell.colSpan;
			y_end = j + cell.rowSpan;
			for(y=j;y < y_end;y++){
				if(!map[y]) break;
				for(x=p;x < x_end;x++){
					map[y][x] = cell;
				}
			}
		}
	}

	return null;
}

■セル要素の二次元配列マップを取得する

■セル要素の二次元配列マップを取得する関数

第01引数に、テーブル要素かセクションを指定します。

戻り値から、二次元配列が得られます。

セル要素の格納位置は、テーブルの行列位置と一致します。

セル要素の二次元配列マップを取得する関数


// ------------------------------------------------------------
// セル要素の二次元配列マップを取得する関数
// ------------------------------------------------------------
function TableElement_Get_CellMap(tableElement){
	var map = new Array();
	var i,j,p,x,y,x_end,y_end;
	var parent;
	var row;
	var rows = tableElement.rows;
	var row_num = rows.length;
	var cell;
	var cells;
	var cell_num;
	if(!row_num) return map;

	for(j=0;j < row_num;j++){
		p = 0;
		row = rows[j];
		if(parent != row.parentNode){
			parent = row.parentNode;
			for(y=j;rows[y];y++){
				if(parent != rows[y].parentNode) break;
				map[y] = new Array();
			}
		}

		cells = row.cells;
		cell_num = cells.length;
		for(i=0;i < cell_num;i++){
			cell = cells[i];
			while(map[j][p]){ p += 1; }

			x_end = p + cell.colSpan;
			y_end = j + cell.rowSpan;
			for(y=j;y < y_end;y++){
				if(!map[y]) break;
				for(x=p;x < x_end;x++){
					map[y][x] = cell;
				}
			}
		}
	}

	return map;
}

上に戻る

テーブルのソートについて

■テーブルを行ソートする（セクション単位）

■テーブルを行ソートする（行要素単位）

■テーブルを行ソートする（セクション単位）

複雑な構造であるテーブルを、行ソートしたい場合に最適です。

■ <TBODY> 要素のデータ構造について

<TBODY> 要素を、複数用意します。

<TBODY> 要素１つを、アイテム１つ分とします。

すべての <TBODY> 要素のテーブル構造を、統一します。

■ <TBODY> 要素の表示順を変更する

ノードリストの登録順序を変更します。

こちらで解説しています。

■セクション単位でソートする関数

第01引数に、<TABLE> 要素を指定します。

第02引数に、比較対象のセルを示す、行の位置を指定します。

第03引数に、比較対象のセルを示す、セルリストの位置を指定します。

第04引数に、true を指定すると降順にソートします。

省略した場合、昇順にソートします。

第05引数に、比較用コールバック関数を指定します。

省略した場合、自動判別します。

比較用コールバック関数の仕様は、以下の通りです。

第01～02引数から、セル要素が得られます。

(第01引数 < 第02引数) である場合、負の数を返します。

(第01引数 == 第02引数) である場合、0 を返します。

(第01引数 > 第02引数) である場合、正の数を返します。

セクション単位でソートする関数


// ------------------------------------------------------------
// セクション単位でソートする関数
// ------------------------------------------------------------
function TableElement_Sort_TableBody(tableElement , rowIndex , cellIndex , descending , callback){
	if(!callback){
		callback = function(c0,c1){
			c0 = (c0.textContent || c0.innerText || "");
			c1 = (c1.textContent || c1.innerText || "");
			if(isNaN(c0) || isNaN(c1)) return c0.localeCompare(c1);
			return (Number(c0) - Number(c1));
		};
	}

	var list = new Array();
	var bodies = tableElement.tBodies;
	var num = bodies.length;
	if(!num) return;
	var i,j;
	for(i=0;i < num;i++){
		var body = bodies[i];
		var row = body.rows[rowIndex] || null;
		var cell = null;
		if(row) cell = row.cells[cellIndex] || null;
		list.push({body:body,cell:cell});
	}

	for(i=0;i < num-1;i++){
		for(j=i+1;j < num;j++){
			var result = callback(list[i].cell,list[j].cell);
			result = (descending) ? (result < 0):(result > 0);
			if(result){
				var tmp = list[i];
				list[i] = list[j];
				list[j] = tmp;
			}
		}
	}

	var prev,next;
	prev = list[0].body;
	for(i=1;i < num;i++){
		next = list[i].body;
		tableElement.insertBefore( next , prev.nextSibling );
		prev = next;
	}
}

■使用例

TBODY 要素を入れ替えてソートする


<html>
  <body>

    <table id="aaa" border="5" contenteditable="true">
      <colgroup>
        <col span="1" width="100">
        <col span="1" bgcolor="#e0e0e0">
        <col span="1" bgcolor="#f0f0f0">
        <col span="1">
        <col span="1" bgcolor="#f0f0f0">
        <col span="1">
        <col span="1" bgcolor="#f0f0f0">
        <col span="1">
      </colgroup>

      <tbody>
        <tr>
	  <td rowspan="4"><img src="http://example.com/photo/001.png"></td>
	  <th rowspan="2">艦船</th>
	  <th rowspan="1">名前</th>
	  <td colspan="5">ながと</td>
	</tr>
        <tr>
	  <th rowspan="1">No.</th>
	  <td colspan="5">1</td>
	</tr>
        <tr>
	  <th rowspan="2">能力</th>
	  <th>火力</th> <td>82</td>
	  <th>雷装</th> <td>0</td>
	  <th>対空</th> <td>31</td>
	</tr>
        <tr>
	  <th>耐久</th> <td>80</td>
	  <th>装甲</th> <td>75</td>
	  <th>回避</th> <td>24</td>
	</tr>
      </tbody>

      <tbody>
        <tr>
	  <td rowspan="4"><img src="http://example.com/photo/003.png"></td>
	  <th rowspan="2">艦船</th>
	  <th rowspan="1">名前</th>
	  <td colspan="5">いせ</td>
	</tr>
        <tr>
	  <th rowspan="1">No.</th>
	  <td colspan="5">3</td>
	</tr>
        <tr>
	  <th rowspan="2">能力</th>
	  <th>火力</th> <td>74</td>
	  <th>雷装</th> <td>0</td>
	  <th>対空</th> <td>28</td>
	</tr>
        <tr>
	  <th>耐久</th> <td>74</td>
	  <th>装甲</th> <td>70</td>
	  <th>回避</th> <td>22</td>
	</tr>
      </tbody>

      <tbody>
        <tr>
	  <td rowspan="4"><img src="http://example.com/photo/021.png"></td>
	  <th rowspan="2">艦船</th>
	  <th rowspan="1">名前</th>
	  <td colspan="5">こんごう</td>
	</tr>
        <tr>
	  <th rowspan="1">No.</th>
	  <td colspan="5">21</td>
	</tr>
        <tr>
	  <th rowspan="2">能力</th>
	  <th>火力</th> <td>63</td>
	  <th>雷装</th> <td>0</td>
	  <th>対空</th> <td>24</td>
	</tr>
        <tr>
	  <th>耐久</th> <td>63</td>
	  <th>装甲</th> <td>52</td>
	  <th>回避</th> <td>30</td>
	</tr>
      </tbody>

      <tbody>
        <tr>
	  <td rowspan="4"><img src="http://example.com/photo/026.png"></td>
	  <th rowspan="2">艦船</th>
	  <th rowspan="1">名前</th>
	  <td colspan="5">ふそう</td>
	</tr>
        <tr>
	  <th rowspan="1">No.</th>
	  <td colspan="5">26</td>
	</tr>
        <tr>
	  <th rowspan="2">能力</th>
	  <th>火力</th> <td>74</td>
	  <th>雷装</th> <td>0</td>
	  <th>対空</th> <td>23</td>
	</tr>
        <tr>
	  <th>耐久</th> <td>67</td>
	  <th>装甲</th> <td>59</td>
	  <th>回避</th> <td>19</td>
	</tr>
      </tbody>

      <tbody>
        <tr>
	  <td rowspan="4"><img src="http://example.com/photo/131.png"></td>
	  <th rowspan="2">艦船</th>
	  <th rowspan="1">名前</th>
	  <td colspan="5">やまと</td>
	</tr>
        <tr>
	  <th rowspan="1">No.</th>
	  <td colspan="5">131</td>
	</tr>
        <tr>
	  <th rowspan="2">能力</th>
	  <th>火力</th> <td>96</td>
	  <th>雷装</th> <td>0</td>
	  <th>対空</th> <td>50</td>
	</tr>
        <tr>
	  <th>耐久</th> <td>93</td>
	  <th>装甲</th> <td>88</td>
	  <th>回避</th> <td>27</td>
	</tr>
      </tbody>

    </table> <br>

    <input type="button" value="名前（昇順）" id="button_name_a" >
    <input type="button" value="名前（降順）" id="button_name_d" > <br>
    <input type="button" value="火力（昇順）" id="button_firepower_a" >
    <input type="button" value="火力（降順）" id="button_firepower_d" > <br>
    <input type="button" value="回避（昇順）" id="button_evasion_a" >
    <input type="button" value="回避（降順）" id="button_evasion_d" > <br>

    

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// セクション単位でソートする関数
	// ------------------------------------------------------------
	function TableElement_Sort_TableBody(tableElement , rowIndex , cellIndex , descending , callback){
		if(!callback){
			callback = function(c0,c1){
				c0 = (c0.textContent || c0.innerText || "");
				c1 = (c1.textContent || c1.innerText || "");
				if(isNaN(c0) || isNaN(c1)) return c0.localeCompare(c1);
				return (Number(c0) - Number(c1));
			};
		}

		var list = new Array();
		var bodies = tableElement.tBodies;
		var num = bodies.length;
		if(!num) return;
		var i,j;
		for(i=0;i < num;i++){
			var body = bodies[i];
			var row = body.rows[rowIndex] || null;
			var cell = null;
			if(row) cell = row.cells[cellIndex] || null;
			list.push({body:body,cell:cell});
		}

		for(i=0;i < num-1;i++){
			for(j=i+1;j < num;j++){
				var result = callback(list[i].cell,list[j].cell);
				result = (descending) ? (result < 0):(result > 0);
				if(result){
					var tmp = list[i];
					list[i] = list[j];
					list[j] = tmp;
				}
			}
		}

		var prev,next;
		prev = list[0].body;
		for(i=1;i < num;i++){
			next = list[i].body;
			tableElement.insertBefore( next , prev.nextSibling );
			prev = next;
		}
	}


	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var table = document.getElementById("aaa");
	var button_name_a = document.getElementById("button_name_a");
	var button_name_d = document.getElementById("button_name_d");
	var button_firepower_a = document.getElementById("button_firepower_a");
	var button_firepower_d = document.getElementById("button_firepower_d");
	var button_evasion_a = document.getElementById("button_evasion_a");
	var button_evasion_d = document.getElementById("button_evasion_d");

	// ------------------------------------------------------------
	// 「名前（昇順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_name_a.onclick = function (e){
		TableElement_Sort_TableBody(table , 0 , 3 , false );
	};

	// ------------------------------------------------------------
	// 「名前（降順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_name_d.onclick = function (e){
		TableElement_Sort_TableBody(table , 0 , 3 , true );
	};

	// ------------------------------------------------------------
	// 「火力（昇順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_firepower_a.onclick = function (e){
		TableElement_Sort_TableBody(table , 2 , 2 , false );
	};

	// ------------------------------------------------------------
	// 「火力（降順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_firepower_d.onclick = function (e){
		TableElement_Sort_TableBody(table , 2 , 2 , true );
	};

	// ------------------------------------------------------------
	// 「回避（昇順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_evasion_a.onclick = function (e){
		TableElement_Sort_TableBody(table , 3 , 5 , false );
	};

	// ------------------------------------------------------------
	// 「回避（降順）」をクリックすると実行されるイベント
	// ------------------------------------------------------------
	button_evasion_d.onclick = function (e){
		TableElement_Sort_TableBody(table , 3 , 5 , true );
	};

    //-->
    </script>

  </body>
</html>

■テーブルを行ソートする（行要素単位）

詳細リストビュー構造のテーブルを、行ソートしたい場合に最適です。

■ <TR> 要素のデータ構造について

<TR> 要素を、複数用意します。

<TR> 要素１つを、アイテム１つ分とします。

すべての <TR> 要素のテーブル構造を、統一します。

■ <TR> 要素の表示順を変更する

ノードリストの登録順序を変更します。

こちらで解説しています。

■行要素単位でソートする関数

第01引数に、セクションを指定します。

<TD> 要素を含む行が、ソート対象となります。

第02引数に、比較対象のセルを示す、セルリストの位置を指定します。

第03引数に、true を指定すると降順にソートします。

省略した場合、昇順にソートします。

第04引数に、比較用コールバック関数を指定します。

省略した場合、自動判別します。

比較用コールバック関数の仕様は、以下の通りです。

第01～02引数から、セル要素が得られます。

(第01引数 < 第02引数) である場合、負の数を返します。

(第01引数 == 第02引数) である場合、0 を返します。

(第01引数 > 第02引数) である場合、正の数を返します。

行要素単位でソートする関数


// ------------------------------------------------------------
// 行要素単位でソートする関数
// ------------------------------------------------------------
function TableSectionElement_Sort_TableRow(section , cellIndex , descending , callback){
	if(!callback){
		callback = function(c0,c1){
			c0 = (c0.textContent || c0.innerText || "");
			c1 = (c1.textContent || c1.innerText || "");
			if(isNaN(c0) || isNaN(c1)) return c0.localeCompare(c1);
			return (Number(c0) - Number(c1));
		};
	}

	var list = new Array();
	var rows = section.rows;
	var num = rows.length;
	if(!num) return;
	var i,j;
	for(i=0;i < num;i++){
		var row = rows[i];
		var cell = row.cells[cellIndex] || null;
		if(cell){
			if(cell.tagName == "TD"){
				list.push({row:row,cell:cell});
			}
		}
	}

	num = list.length;
	for(i=0;i < num-1;i++){
		for(j=i+1;j < num;j++){
			var result = callback(list[i].cell,list[j].cell);
			result = (descending) ? (result < 0):(result > 0);
			if(result){
				var tmp = list[i];
				list[i] = list[j];
				list[j] = tmp;
			}
		}
	}

	var prev,next;
	prev = list[0].row;
	for(i=1;i < num;i++){
		next = list[i].row;
		section.insertBefore( next , prev.nextSibling );
		prev = next;
	}
}

■使用例

TR 要素を入れ替えてソートする


<html>
  <body>

    <table id="aaa" border="5" contenteditable="true">

      <thead>
        <tr bgcolor="#e0e0e0">
	  <th colspan="2">艦船</td>
	  <th colspan="6">能力</th>
	</tr>
        <tr bgcolor="#f0f0f0">
	  <th>名前</th>
	  <th>No.</th>
	  <th>火力</th>
	  <th>雷装</th>
	  <th>対空</th>
	  <th>耐久</th>
	  <th>装甲</th>
	  <th>回避</th>
	</tr>
      </thead>

      <tbody>
        <tr>
	  <td>ながと</td>
	  <td>1</td>
	  <td>82</td>
	  <td>0</td>
	  <td>31</td>
	  <td>80</td>
	  <td>75</td>
	  <td>24</td>
	</tr>
        <tr>
	  <td>いせ</td>
	  <td>3</td>
	  <td>74</td>
	  <td>0</td>
	  <td>28</td>
	  <td>74</td>
	  <td>70</td>
	  <td>22</td>
	</tr>
        <tr>
	  <td>こんごう</td>
	  <td>21</td>
	  <td>63</td>
	  <td>0</td>
	  <td>24</td>
	  <td>63</td>
	  <td>52</td>
	  <td>30</td>
	</tr>
        <tr>
	  <td>ふそう</td>
	  <td>26</td>
	  <td>74</td>
	  <td>0</td>
	  <td>23</td>
	  <td>67</td>
	  <td>59</td>
	  <td>19</td>
	</tr>
        <tr>
	  <td>やまと</td>
	  <td>131</td>
	  <td>96</td>
	  <td>0</td>
	  <td>50</td>
	  <td>93</td>
	  <td>88</td>
	  <td>27</td>
	</tr>

    </table> <br>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 行要素単位でソートする関数
	// ------------------------------------------------------------
	function TableSectionElement_Sort_TableRow(section , cellIndex , descending , callback){
		if(!callback){
			callback = function(c0,c1){
				c0 = (c0.textContent || c0.innerText || "");
				c1 = (c1.textContent || c1.innerText || "");
				if(isNaN(c0) || isNaN(c1)) return c0.localeCompare(c1);
				return (Number(c0) - Number(c1));
			};
		}

		var list = new Array();
		var rows = section.rows;
		var num = rows.length;
		if(!num) return;
		var i,j;
		for(i=0;i < num;i++){
			var row = rows[i];
			var cell = row.cells[cellIndex] || null;
			if(cell){
				if(cell.tagName == "TD"){
					list.push({row:row,cell:cell});
				}
			}
		}

		num = list.length;
		for(i=0;i < num-1;i++){
			for(j=i+1;j < num;j++){
				var result = callback(list[i].cell,list[j].cell);
				result = (descending) ? (result < 0):(result > 0);
				if(result){
					var tmp = list[i];
					list[i] = list[j];
					list[j] = tmp;
				}
			}
		}

		var prev,next;
		prev = list[0].row;
		for(i=1;i < num;i++){
			next = list[i].row;
			section.insertBefore( next , prev.nextSibling );
			prev = next;
		}
	}


	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var table = document.getElementById("aaa");

	// ------------------------------------------------------------
	// ソートするボディセクションを取得する（この例では 0 番目）
	// ------------------------------------------------------------
	var tbody = table.tBodies[0];

	// ------------------------------------------------------------
	// ソートアイコン用の要素を用意する
	// ------------------------------------------------------------
	// 要素を作成する
	var sort_icon_element = document.createElement("span");
	// スタイルの設定
	sort_icon_element.style.cssText = "color:#a0a0a0; font-size:10px;";
	// テキストノードを作成する
	var sort_icon_text = document.createTextNode("");
	// ノードリストに登録
	sort_icon_element.appendChild(sort_icon_text);

	// ------------------------------------------------------------
	// ヘッダセルのリストを取得する
	// ------------------------------------------------------------
	// ヘッダセクションを取得する
	var thead = table.tHead;
	// ヘッダ用の行要素を取得する（この例では２行目）
	var row = thead.rows[1];
	// ヘッダセルのリストを取得する
	var header_cell_list = row.cells;

	// ------------------------------------------------------------
	// ヘッダセルごとにクリック操作によるソート機能を追加
	// ------------------------------------------------------------
	var i;
	var num = header_cell_list.length;
	for(i=0;i < num;i++){

		(function(){

			// ------------------------------------------------------------
			// ローカル変数
			// ------------------------------------------------------------
			// 自身のインデックス
			var cell_index = i;
			// ソート順序
			var descending = true;

			// ------------------------------------------------------------
			// 自身のヘッダセルを取得（TH 要素）
			// ------------------------------------------------------------
			var header_cell = header_cell_list[cell_index];

			// スタイルを設定
			header_cell.style.cursor = "pointer";

			// ------------------------------------------------------------
			// クリックすると実行されるイベント
			// ------------------------------------------------------------
			header_cell.onclick = function (e){

				// ソートアイコンを外す
				if(sort_icon_element.parentNode){
					sort_icon_element.parentNode.removeChild(sort_icon_element);
				}

				// ソート順序を切り替え
				descending = !(descending);

				// 行要素単位でソートする
				TableSectionElement_Sort_TableRow(tbody , cell_index , descending);

				// テキストを更新
				sort_icon_text.nodeValue = (descending) ? "▲":"▼";

				// ソートアイコンを最後尾に登録
				header_cell.appendChild(sort_icon_element);
			};

		})();

	}

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る