tableタグをJavascriptで操作する。HTMLTableElementについて

HTMLtableElementというインターフェースを使うことで、tableタグをJavaScriptで操作できることが判明。

HTMLTableElementの概要とは何か？と使い方のまとめ。

##HTMLTableElementとは？

HTML5から実装された機能で、tableタグをオブジェクトに変換し行列の状態を取得したり、行列を追加したりなどの操作ができる。

HTMLElementであるタグ（要素）をAPIで操作する形となる。

これを使うと、例えばtableタグ内のtrタグは、rowsプロパティで表される。

列を追加したい場合はinsertRow()メソッドを使うことで、trタグを追加できる。

###・HTMLTableElement関連のAPI
HTMLTableElementで用意されているのは、tableタグ直下のthタグ、trタグなどの操作のみ。

trタグ内のtdタグの取得や追加にはHTMLTableRowElementを使う。

##なにが便利なのか？ tableタグをそのまま処理できるということに尽きる。

例えば、以下のような、３行３列のtableは、trタグやtdタグで表される。

tableタグ

<table id="xx">
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
</table>

これを、tableタグのまま、行や列の数を取得したり、追加することができる。

##実例

###1. 行と列数の取得
実例として、列数と行番号を取得してみる。

取得したtableタグを変数table（任意）とし、その行プロパティの長さを取得する場合は、

・table.rows.length

同様の考え方で、取得した行のセル数を取得するには、HTMLTableRowElementのcellsを使う。1行目のセル数を取得する式は以下となる。

・table.rows[0].cells.length

行列数の取得

function RowCellLength(table){
    console.log("row-length:", table.rows.length)
    console.log("cell-length:", table.rows[0].cells.length)
}

▼実際の実行例
以下のようなテーブルのid名をxxとして、行列数を取得する関数RowCellLengthに渡すと、行数と列数を返してくれる。

###2. 行の追加 応用編としてテーブルの3行目に３列追加する場合は以下となる。

function createTable(table){
 
    //3行目に行を追加
    newRow = table.insertRow(2)

    //セルを3つ追加
    for (let i=0; i <3; i++ ){
      newCell = newRow.insertCell(0) //先頭にセルを追加
      newCell.colSpan = "1"  //colspan="1"をセット
      newCell.rowSpan = "1"　//rowspan="1"をセット
      newCell.innerHTML = "new cell"  //セルの中に値を入力
    }
}

・table.insertRow(i)
i番目に行を追加する。0スタート。

・row.insertCell(i)
指定した行のi番目にセル（tdタグ）を追加する。0スタート。

・cell.colSpan = "1"
指定したセルの属性にcolspan="1"をセットする。

・row.colSpan = "1"
指定したセルの属性にrowspan="1"をセットする。

・cell.innerHTML = "文字列"
指定したセル（tdタグ）内に文字列を挿入する。タグも挿入可能。

上記処理で、以下のようなセルが生成される。

<tr><td colspan="1" rowspan="1">new cell</td>

これをfor文で3回繰り返すとセルが３つになる。