|
カテゴリ:[JS] JavaScript
tableを動的に生成する
方法その1
createTableファンクションを実行すると、以下のブロック要素中に テーブルを作成することができる。 <div id="div3"></div> 方法その2 1.createElementメソッドでtableオブジェクト(table要素)を作成する。
2.tableオブジェクトのinsertRowメソッドでtableRowオブジェクト(tr要素)を 作成する。 引数には、作成する行を挿入する位置を指定する。 0を指定すると挿入する行は表の先頭に位置する。 -1を指定すると挿入する行は表の後尾に位置する。
3.tableRowオブジェクトのinsertCellメソッドでtableCellオブジェクト(td要素)を 作成する。 引数には、作成するセルの位置を指定する。
4.td要素に格納するテキストノードを作成する。
5.appendChildメソッドでテキストノードをセルに格納する。
6.tableオブジェクトをドキュメントに追加する。
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 セルの結合数 メソッド なし お気に入りの記事を「いいね!」で応援しよう
最終更新日
2008年03月17日 18時45分15秒
コメント(0) | コメントを書く
[[JS] JavaScript] カテゴリの最新記事
|