uhyohyo.net

JavaScript初級者から中級者になろう

二章第九回 theadとtfoot

前回、thead要素とtfoot要素という要素を少し紹介しました。今回はこれについて詳しく解説します。

<table>
  <thead>
    <tr>
      <td>thead1</td>
      <td>thead2</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>tfoot1</td>
      <td>tfoot2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>tbody1</td>
      <td>tbody2</td>
    </tr>
    <tr>
      <td>tbody3</td>
      <td>tbody4</td>
    </tr>
  </tbody>
</table>
        

theadとtfootは、テーブルのそれぞれ「ヘッダ」と「フッタ」を記述するためのものです。ヘッダはテーブルの最初にある行、フッタは最後にある行です。それぞれ何行でも(tr要素が何個あっても)構いません。

table要素の子要素として記述できるのは、thead,tfoot,tbodyの3つの要素と、さらに付属的にcaptionやcol,colgroupなどです。今回は、thead,tfoot,tbodyについて解説します。

theadとtfootは、一つのtableにつき0個または1個あります。tbodyは、1個以上あります。tbodyは複数でも構いません。

tbodyは省略できるので、tableの下に直接trを置いた場合、それらが省略されたtbodyで囲われているというようにみなされます。

また、tableの中に書く順は、thead,tfoot,tbodyの順だと決まっています(ただし、HTML5においてはtfootをtbodyの後に書く書き方も許可されました)。そのため、画面上でtfootの部分が最後にあっても、内部的にはあくまで要素はthead,tfoot,tbodyの順に並んでいます。

これはどう影響するかというと、insertRowやdeleteRowなどで指定する「行の番号」に影響してきます。ここで指定するのはあくまで内部的な(木構造上の)番号なので、例えば上のサンプルの場合だと、theadの中のtrが0番目、その次がtfootの中のtrで1番目、その次にtbodyの中のtr2つが2番目、3番目となります。

さて、それではやりにくい場合というものあります。そこで、thead,tfoot,tbodyそれぞれに対して処理をする方法があります。

まず、thead,tfoot,tbodyのHTMLElementは、HTMLTableSectionElementと呼ばれます。実は、このHTMLTabeSectionElementもそれぞれinsertRowとdeleteRowを持っています。使い方は同じなので、前回を参照して下さい。

それでは、これらのHTMLTableSectionElementの取得の仕方ですが、まず、theadとtfootは、それぞれtable要素が持つcreateTHeadcreateTFootというメソッドで取得できます。引数はいらず、返り値がそれぞれthead,tfootのオブジェクトです。ちなみに、thead,tfootがテーブルに無かった場合は、新しく空のTHEADやTFOOTが作られて、それを返します(こちらがメソッド名の由来ですね)。

また、逆にtheadやtfootをテーブルから除去するメソッドもあります。それぞれtableが持つdeleteTHeaddeleteTFootです。引数はなく、返り値もありません。呼び出すと、除去されます。既に無かった場合も、特にエラーになることはありません。

また、tbodyは、複数ある可能性があるので、table要素のtBodiesというプロパティにHTMLCollectionが入っています。これがtbody要素の一覧です。これを使って取得しましょう。

実際のサンプルで見てみましょう。

<table id="aaaaa">
  <thead>
    <tr>
      <td>thead1</td>
      <td>thead2</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>tfoot1</td>
      <td>tfoot2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>tbody1</td>
      <td>tbody2</td>
    </tr>
    <tr>
      <td>tbody3</td>
      <td>tbody4</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  var table = document.getElementById('aaaaa');

  var tbody = table.tBodies.item(0);

  var newtr = tbody.insertRow(0);

  for(var i=0;i<2;i++){
    var newtd = newtr.insertCell( newtr.cells.length );
    newtd.appendChild( document.createTextNode('testtest'+i) );
  }
</script>
          

newtrにinsertRowの戻り値を代入した後は、前回のinsertRowのサンプルと全く同じなので、特に解説はしません。とりあえず、今回はtbodyをいじってみました。

tbodyに、table.tBodies.item(0)を代入しています。これは、tableのもつ0番目のtbody要素です。tableにはtbody要素は1つしかありませんね。