formオブジェクトTableオブジェクト
- Tableオブジェクト一覧
- テーブルのセル情報を取得〔cells[]〕
- テーブルの行情報を取得〔rows[]〕
- テーブルの枠線を取得・設定〔borderプロパティ〕
- テーブルの表題を取得・設定/生成・削除〔captionプロパティ〕
- テーブルの外枠の表示方法を取得・設定〔frameプロパティ〕
- セルの内外余白を取得・設定〔cellPadding/cellSpacingプロパティ〕
- テーブルの幅を取得・設定〔widthプロパティ〕
- テーブルに1行挿入・1行削除〔insertRow/deleteRowメソッド〕
Tableオブジェクト一覧
2007/7/14
コレクション | 説明 |
---|---|
cells | テーブルのセル情報を取得 |
rows | テーブルの行情報を取得 |
プロパティ | 説明 |
border | テーブルの枠線を取得・設定 |
caption | テーブルの表題を取得・設定 |
cellPadding | セルの内余白を取得・設定 |
cellSpacing | セルの外余白を取得・設定 |
border | テーブルの外枠の表示方法を取得・設定 |
border | テーブルの枠線の太さを取得・設定 |
メソッド | 説明 |
createCaption() | テーブルの表題を生成 |
deleteCaption() | テーブルの表題を削除 |
insertRow() | 1行行挿入 |
deleteRow() | 1行削除 |
テーブルのセル情報を取得
cells[]
2007/7/14
Tableオブジェクト.cells[]
サンプルを見る<div class="tbl"> <table id="tableH"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <form action="#"> <p> <input type="button" value="セル情報を取得" onclick="fTableCell()" /> </p> </form> <p id="resTableCell"></p> <script> function fTableCell(){ var s=""; var tObj=document.getElementById("tableH"); for(var i=0; i<tObj.rows.length; i++){ if(tObj.rows[i]!=null){ for(var j in tObj.rows[i].cells){ if(tObj.rows[i].cells[j].innerHTML){ s+="rows["+i+"].cells["+j+"]=>"+tObj.rows[i].cells[j].innerHTML+"<br>"; }else{ s+="rows["+i+"].cells["+j+"]=>"+tObj.rows[i].cells[j]+"<br>"; } } } s+="--------------------------------<br>"; } document.getElementById("resTableCell").innerHTML=s; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
テーブルの行情報を取得
rows[]
2007/7/14
Tableオブジェクト.rows[]
サンプルを見る<div class="tbl"> <table id="tableF"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <form action="#"> <p><input type="button" value="ノード名と値を取得" onclick="fTableRows2()"></p> <p id="resTableRows2"></p> <p><input type="button" value="行情報を取得(大量に出ます)" onclick="fTableRows()"></p> <p id="resTableRows"></p> </form> <script> function fTableRows(){ var s=""; var tObj=document.getElementById("tableF"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ for(var j in tObj.rows[i]){ if(tObj.rows[i][j]!=null){ s+="rows["+i+"]["+j+"]=>"+tObj.rows[i][j]+"<br \/>"; } } } } document.getElementById("resTableRows").innerHTML=s; } function fTableRows2(){ var s=""; var tObj=document.getElementById("tableF"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ if(tObj.rows[i].nodeName==undefined) continue; s+="nodeName: "+tObj.rows[i].nodeName+" / "; s+="nodeValue: "+tObj.rows[i].innerHTML+"<br>"; for(var j in tObj.rows[i].childNodes){ if(tObj.rows[i].childNodes[j].nodeName==undefined) continue; s+=tObj.rows[i].childNodes[j].nodeName+": "; if(navigator.userAgent.indexOf("MSIE")>-1){ /* IE */ s+=tObj.rows[i].childNodes[j].innerText+"<br>"; }else{ /* IE以外 */ s+=tObj.rows[i].childNodes[j].textContent+"<br>"; } } } } document.getElementById("resTableRows2").innerHTML=s; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
テーブルの枠線を取得・設定
borderプロパティ
2007/7/14
Tableオブジェクト.border = 数値(pixel)
borderプロパティは、テーブルの枠線を取得・設定します。
サンプルを見る<form action="#"> <p> テーブルの枠線: <span id="resTableBorder" class="hi"></span><br> <input type="button" value="1px" onclick="fTableBorder(1)"> <input type="button" value="2px" onclick="fTableBorder(2)"> <input type="button" value="3px" onclick="fTableBorder(3)"> <input type="button" value="4px" onclick="fTableBorder(4)"> <input type="button" value="5px" onclick="fTableBorder(5)"> <input type="button" value="6px" onclick="fTableBorder(6)"> <input type="button" value="7px" onclick="fTableBorder(7)"> <input type="button" value="8px" onclick="fTableBorder(8)"> <input type="button" value="9px" onclick="fTableBorder(9)"> <input type="button" value="10px" onclick="fTableBorder(10)"> </p> </form> <div class="tbl"> <table id="tableA"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <script> function fTableBorder(pixel){ var tObj=document.getElementById("tableA"); /* テーブルの枠線を設定 */ tObj.border=pixel; /* テーブルの枠線を取得 */ document.getElementById("resTableBorder").innerHTML=tObj.border+" px"; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
テーブルの表題を取得・設定/生成・削除
captionプロパティ
2007/7/14
Tableオブジェクト.captin = "表題"
Tableオブジェクト.createCaption();
Tableオブジェクト.deleteCaption();
Tableオブジェクト.createCaption();
Tableオブジェクト.deleteCaption();
captionプロパティはテーブルの表題を取得・設定します。
表題を削除する場合は、deleteCaptionメソッドを使用します。
表題を生成する場合は、createCaptionメソッドを使用します。
<form action="#"> <p> テーブルの表題: <span id="resTableCaption" class="hi"></span><br> <input type="button" value="キャプションを取得" onclick="fGetTableCaption()"> <input type="button" value="キャプションを削除" onclick="fDelCaption()"><br> <input type="button" value="キャプションを'表題A'に設定" onclick="fSetTableCaption('表題A')"> <input type="button" value="キャプションを'表題B'に設定" onclick="fSetTableCaption('表題B')"> </p> </form> <div class="tbl"> <table id="tableB"> <caption>表題サンプル1</caption> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <script> function fGetTableCaption(){ /* 表題を取得 */ var tObj=document.getElementById("tableB"); if(tObj.caption){ document.getElementById("resTableCaption").innerHTML=tObj.caption.innerHTML; }else{ document.getElementById("resTableCaption").innerHTML="キャプション要素がありません"; } } function fSetTableCaption(capStr){ /* 表題を生成 */ var tObj=document.getElementById("tableB"); tObj.createCaption().innerHTML="≪"+capStr+"≫"; } function fDelCaption(){ /* 表題を削除 */ var tObj=document.getElementById("tableB"); tObj.deleteCaption(); } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
テーブルの外枠の表示方法を取得・設定
frameプロパティ
2007/7/14
Tableオブジェクト.frame = void | above | below | hsides | vsides | His | rhs | box | border
frameプロパティは、テーブルの外枠の表示方法を取得・設定します。
サンプルを見る<p> テーブルの外枠の表示方法: <span id="resTableFrame" class="hi"></span><br> <input type="button" value="void" onclick="fTableFrame('void')"> <input type="button" value="above" onclick="fTableFrame('above')"> <input type="button" value="below" onclick="fTableFrame('below')"> <input type="button" value="hsides" onclick="fTableFrame('hsides')"> <input type="button" value="vsides" onclick="fTableFrame('vsides')"> <input type="button" value="lhs" onclick="fTableFrame('lhs')"> <input type="button" value="rhs" onclick="fTableFrame('rhs')"> <input type="button" value="box" onclick="fTableFrame('box')"> <input type="button" value="border" onclick="fTableFrame('border')"> </p> <div class="tbl"> <table id="tableC" <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <script> function fTableFrame(_frame){ var s=""; var tObj=document.getElementById("tableC"); tObj.frame=_frame; document.getElementById("resTableFrame").innerHTML=tObj.frame; } </script>
テーブルの外枠の表示方法:
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
セルの内外余白を取得・設定
cellPadding/cellSpacingプロパティ
2007/7/14
Tableオブジェクト.cellPadding = 内余白(pixel)
Tableオブジェクト.cellSpacing = 外余白(pixel)
Tableオブジェクト.cellSpacing = 外余白(pixel)
cellPaddingプロパティは、セルの内余白を取得・設定します。
cellSpacingプロパティは、セルの外余白を取得・設定します。

<form action="#"> <p>セル内余白: <span id="resTableCellPadding" class="hi"></span></br> <input type="button" value="1px" onclick="fTableCellPadding(1)"> <input type="button" value="5px" onclick="fTableCellPadding(5)"> <input type="button" value="10px" onclick="fTableCellPadding(10)"> <input type="button" value="15px" onclick="fTableCellPadding(15)"> <input type="button" value="20px" onclick="fTableCellPadding(20)"> </p> <p>セル外余白: <span id="resTableCellSpacing" class="hi"></span><br> <input type="button" value="1px" onclick="fTableCellSpacing(1)"> <input type="button" value="5px" onclick="fTableCellSpacing(5)"> <input type="button" value="10px" onclick="fTableCellSpacing(10)"> <input type="button" value="15px" onclick="fTableCellSpacing(15)"> <input type="button" value="20px" onclick="fTableCellSpacing(20)"> </p> </form> <table id="tableE" border="1"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> <script> function fTableCellPadding(pixel){ var tObj=document.getElementById("tableE"); tObj.cellPadding=pixel; document.getElementById("resTableCellPadding").innerHTML=tObj.cellPadding+"px"; } function fTableCellSpacing(pixel){ var tObj=document.getElementById("tableE"); tObj.cellSpacing=pixel; document.getElementById("resTableCellSpacing").innerHTML=tObj.cellSpacing+"px"; } </script>
テーブルの幅を取得・設定
widthプロパティ
2007/7/14
Tableオブジェクト.width = 数値(pixel) | auto | %
widthプロパティは、テーブルの幅を取得・設定します。
指定可能な値は、数値(pixel単位)、auto(自動)、%(パーセント)です。

<form action="#"> <p>テーブルの幅: <span id="resTableWidth" class="hi"></span></p> <p> <input type="button" value="auto" onclick="fTableWidth('auto')"> <input type="button" value="100px" onclick="fTableWidth('100px')"> <input type="button" value="200px" onclick="fTableWidth('200px')"> <input type="button" value="300px" onclick="fTableWidth('300px')"> <input type="button" value="400px" onclick="fTableWidth('400px')"> <input type="button" value="50%" onclick="fTableWidth('50%')"> <input type="button" value="100%" onclick="fTableWidth('100%')"> </p> </form> <table id="tableE" border="1"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> <script> function fTableWidth(pixel){ var tObj=document.getElementById("tableE"); tObj.width=pixel; document.getElementById("resTableWidth").innerHTML=tObj.width; } </script>
テーブルに1行挿入・1行削除
insertRow/deleteRowメソッド
2007/7/14
Tableオブジェクト.insertRow( 行番号 );
Tableオブジェクト.deleteRow( 行番号 );
Tableオブジェクト.deleteRow( 行番号 );
insertRowメソッドは、テーブルに行を挿入します。
deleteRowメソッドは、テーブルから行を削除します。
第1引数行番号に、挿入・削除する行番号を指定します(行番号は0始まり)。
最終行に1行挿入・最終行から1行削除
サンプルを見る
<form action="#"> <p> <input type="button" value="最下行に1行挿入" onclick="fTalbeInsertRow()"> <input type="button" value="最下行から1行削除" onclick="fTalbeDeleteRow()"> </p> </form> <div class="tbl"> <table id="tableJ"> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </div> <script> function fTalbeDeleteRow(){ var tObj=document.getElementById("tableJ"); /* 行数 */ var idx=tObj.rows["length"]; if(idx<1) return false; /* 1行挿入(最終行から削除)*/ tObj.deleteRow(idx-1); } function fTalbeInsertRow(){ var tObj=document.getElementById("tableJ"); /* 行数 */ var idx=tObj.rows["length"]; var idy=idx+1; /* 1行挿入(最終行に挿入)*/ var insObj=tObj.insertRow(idx); //var n=insObj.insertCell(0); var n=document.createElement("th"); insObj.appendChild(n); var x=insObj.insertCell(1) var y=insObj.insertCell(2) var z=insObj.insertCell(3) n.innerHTML="item"+idy; x.innerHTML=idy+"-1"; y.innerHTML=idy+"-2"; z.innerHTML=idy+"-3"; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
先頭に1行挿入・先頭から1行削除
サンプルを見る
<form action="#"> <p> <input type="button" value="先頭に1行挿入" onclick="fTalbeInsertRowFirst()"> <input type="button" value="先頭から1行削除" onclick="fTalbeDeleteRowFirst()"> </p> </form> <div class="tbl"> <table id="tableK"> <tr><th>item3</th><td>3-1</td><td>3-2</td><td>3-3</td></tr> <tr><th>item2</th><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><th>item1</th><td>1-1</td><td>1-2</td><td>1-3</td></tr> </table> </div> <script> function fTalbeDeleteRowFirst(){ var tObj=document.getElementById("tableK"); var idx=tObj.rows["length"]; if(idx<1) return false; /* 1行挿入(先頭行から削除)*/ tObj.deleteRow(0); } function fTalbeInsertRowFirst(){ var tObj=document.getElementById("tableK"); /* 行番号 */ var idx=0; /* 行数 */ var idy=tObj.rows["length"]+1; /* 1行挿入(先頭行に挿入)*/ var insObj=tObj.insertRow(idx); //var n=insObj.insertCell(0); var n=document.createElement("th"); insObj.appendChild(n); var x=insObj.insertCell(1); var y=insObj.insertCell(2); var z=insObj.insertCell(3); n.innerHTML="item"+idy; x.innerHTML=idy+"-1"; y.innerHTML=idy+"-2"; z.innerHTML=idy+"-3"; } </script>
item3 | 3-1 | 3-2 | 3-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item1 | 1-1 | 1-2 | 1-3 |