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

JavaScriptプログラミング入門（その６）table要素の動的生成

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要素を表している。プロパティcaptionrows TableRowオブジェクトの配列(HTMLCollection)tBodies TableSectionオブジェクトの配列（ただし、tbody要素のみ）tFoot thead要素を表すTableSectionオブジェクト、存在しない場合はnulltHead tfoot要素を表すTableSectionオブジェクト、存在しない場合はnullborder 表のボーダーの幅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 セルの結合数メソッドなし