読書と技術となんか色々のログ

tableを動的に生成する

方法その１

function createTable(){
  var div = document.getElementById("div3");
  var str = "";
  str += "<table>";
  str += "<tr>";
  str += "<td>text1</td>";
  str += "<td>text2</td>";
  str += "<td>text3</td>";
  str += "</tr>";
  str += "<tr>";
  str += "<td>text1</td>";
  str += "<td>text2</td>";
  str += "<td>text3</td>";
  str += "</tr>";
  str += "</table>";

  div.innerHTML = str;
}


createTableファンクションを実行すると、以下のブロック要素中に
テーブルを作成することができる。
<div id="div3"></div>

---

方法その２
１．createElementメソッドでtableオブジェクト(table要素)を作成する。

var tbl = document.createElement("table");


２．tableオブジェクトのinsertRowメソッドでtableRowオブジェクト(tr要素)を
　　作成する。
　　引数には、作成する行を挿入する位置を指定する。
　　0を指定すると挿入する行は表の先頭に位置する。
　　-1を指定すると挿入する行は表の後尾に位置する。

var row = tbl.insertRow(-1);


３．tableRowオブジェクトのinsertCellメソッドでtableCellオブジェクト(td要素)を
　　作成する。
　　引数には、作成するセルの位置を指定する。

var cell1 = row.insertCell(0);


４．td要素に格納するテキストノードを作成する。

var textValue = "sample value";
var txt1 = document.createTextNode(textValue);


５．appendChildメソッドでテキストノードをセルに格納する。

cell1.appendChild(txt1);


６．tableオブジェクトをドキュメントに追加する。

document.body.appendChild(tbl);


---

Tableオブジェクト
Tableオブジェクトはtable要素を表している。

プロパティ
caption
rows TableRowオブジェクトの配列(HTMLCollection)
tBodies TableSectionオブジェクトの配列（ただし、tbody要素のみ）
tFoot thead要素を表すTableSectionオブジェクト、存在しない場合はnull
tHead tfoot要素を表すTableSectionオブジェクト、存在しない場合はnull
border 表のボーダーの幅
cellPadding セルの内容(contents)とボーダーの幅
cellSpacing セルとセルの幅
width 表の幅

メソッド
HTMLElement createCaption()
HTMLElement createTHead()
HTMLElement createTFoot()
HTMLElement insertRow(long index) TableRowオブジェクトを返す。

void deleteCaption()
void deleteTHead()
void deleteTFoot()
void deleteRow(long index)


TableSectionインターフェース
TableSectionオブジェクトはtbody,thead,tfoot要素を表している。

プロパティ
rows TableRowオブジェクトの配列(HTMLCollection)
align セルの水平方向の配置
vAlign セルの垂直方向の配置

メソッド
HTMLElement insertRow(long index) TableRowオブジェクトを返す。
void deleteRow(long index)


TableRowインターフェース
TableRowオブジェクトはtr要素を表している。

プロパティ
cells　…　TableCellオブジェクトの配列(HTMLCollection)
rowIndex　…　表内での行の位置
sectionRowIndex　…　セクション内での行の位置
align　…　セルの水平方向の配置
vAlign　…　セルの垂直方向の配置

メソッド
HTMLElement insertCell(long index) TableCellオブジェクトを返す。
void deleteCell(long index)


TableCellインターフェース
TableCellオブジェクトはth,td要素を表している。

プロパティ
cellIndex 行内のセルの位置
align セルの水平方向の配置
vAlign セルの垂直方向の配置
colSpan セルの結合数
rowSpan セルの結合数

メソッド
なし