TableオブジェクトRowオブジェクト
- Rowオブジェクト一覧
- 行の水平・垂直位置を取得・設定〔align/vAlignプロパティ〕
- 行のインデックス番号を取得〔rowIndexプロパティ〕
- 行内のHTML文を取得・設定〔innerHTMLプロパティ〕
- セルの挿入・削除〔insertCell/deleteCellメソッド〕
Rowオブジェクト一覧
2007/7/14
プロパティ | 説明 |
---|---|
align | 行の水平位置を取得・設定 |
rowIndex | 行のインデックス番号を取得 |
innerHTML | 行内のHTML文を取得・設定 |
vAlign | 行の垂直位置を取得・設定 |
メソッド | 説明 |
deleteCell | セル削除 |
insertCell | セル挿入 |
行の水平・垂直位置を取得・設定
align/vAlignプロパティ
2007/7/14
Rowオブジェクト.align = left | center | right
Rowオブジェクト.vAlign = top | middle | bottom
Rowオブジェクト.vAlign = top | middle | bottom
alignプロパティは、行(TR要素)の水平位置を取得・設定します。
vAlignプロパティは、行(TR要素)の垂直位置を取得・設定します。
<style type="text/css"> table#tableA th, table#tableA td { width:100px; height:100px; } </style> <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> <p> 水平位置: <input type="button" value="left" onclick="fRowAlign(this.value)"> <input type="button" value="center" onclick="fRowAlign(this.value)"> <input type="button" value="right" onclick="fRowAlign(this.value)"> </p> <p> 垂直位置: <input type="button" value="top" onclick="fRowvAlign(this.value)"> <input type="button" value="middle" onclick="fRowvAlign(this.value)"> <input type="button" value="bottom" onclick="fRowvAlign(this.value)"> </p> <p id="resRowAlign"></p> <p id="resRowvAlign"></p> <script> /* 行(TR要素)の水平位置を取得・設定 */ function fRowAlign(_align){ var s=""; var tObj=document.getElementById("tableA"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ if(tObj.rows[i].tagName=="TR"){ tObj.rows[i].align=_align; s+="rows["+i+"].align="+tObj.rows[i].align+"<br>"; } } } document.getElementById("resRowvAlign").innerHTML=""; document.getElementById("resRowAlign").innerHTML=s; } /* 行(TR要素)の垂直位置を取得・設定 */ function fRowvAlign(_valign){ var s=""; var tObj=document.getElementById("tableA"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ if(tObj.rows[i].tagName=="TR"){ tObj.rows[i].vAlign=_valign; s+="rows["+i+"].align="+tObj.rows[i].vAlign+"<br>"; } } } document.getElementById("resRowAlign").innerHTML=""; document.getElementById("resRowvAlign").innerHTML=s; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
水平位置:
垂直位置:
行のインデックス番号を取得
rowIndexプロパティ
2007/7/14
Rowオブジェクト.cellIndex = インデックス番号
rowIndexプロパティは、行(TR要素)の行番号を取得します。
サンプルを見る<div class="tbl"> <table id="tableB"> <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> <p><input type="button" value="行番号取得" onclick="fGetRowIndex()" /></p> <p id="resGetRowIndex"></p> <script> function fGetRowIndex(){ var s=""; var tObj=document.getElementById("tableB"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ if(tObj.rows[i].rowIndex!=undefined){ s+="rows["+i+"].rowIndex = "+tObj.rows[i].rowIndex+"<br>"; } } } document.getElementById("resGetRowIndex").innerHTML=s; } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
行内のHTML文を取得・設定
innerHTMLプロパティ
2007/7/14
Rowオブジェクト.innerHTML = HTML文
innerHTMLプロパティは、行(TR要素)内のHTML文を取得します。
サンプルを見る<div class="tbl"> <table id="tableC"> <tr><th>item1</th><td>1-1</td><td><strong>1-2</strong></td><td>1-3</td></tr> <tr><th>item2</th><td>2-1</td><td><strong>2-2</strong></td><td>2-3</td></tr> <tr><th>item3</th><td>3-1</td><td><strong>3-2</strong></td><td>3-3</td></tr> </table> </div> <p> <input type="button" value="行内のHTML文を取得" onclick="fGetInnerHTML()" /><br> <textarea id="resGetInnerHTML" cols="60" rows="5"></textarea> </p> <script> function fGetInnerHTML(){ var s=""; var tObj=document.getElementById("tableC"); for(var i in tObj.rows){ if(tObj.rows[i]!=null){ if(tObj.rows[i].innerHTML!=undefined){ s+=tObj.rows[i].innerHTML+"\n"; } } } if(navigator.userAgent.indexOf("MSIE")>-1){ /* IE */ document.getElementById("resGetInnerHTML").innerText=s; }else{ /* IE以外 */ /* document.getElementById("resGetInnerHTML").innerHTML=s; */ document.getElementById("resGetInnerHTML").textContent=s; } } </script>
item1 | 1-1 | 1-2 | 1-3 |
---|---|---|---|
item2 | 2-1 | 2-2 | 2-3 |
item3 | 3-1 | 3-2 | 3-3 |
セルの挿入・削除
insertCell/deleteCellメソッド
2007/7/14
Rowオブジェクト.deleteCell( セル番号 )
Rowオブジェクト.insertCell( セル番号 )
Rowオブジェクト.insertCell( セル番号 )
insertCellメソッドは、対象となる行(TR要素)にセルを挿入します。
第1引数セルのインデックス番号に、挿入するセルのインデックス番号を指定します。
deleteCellメソッドは、対象となる行(TR要素)からセルを削除します。
第1引数セルのインデックス番号に、削除するセルのインデックス番号を指定します。
※セルのインデックス番号は0始まりです。
サンプルを見る<p> <input type="button" value="1列挿入" onclick="fTalbeInsertRow()"> <input type="button" value="1列削除" onclick="fTalbeDeleteRow()"> </p> <div class="tbl"> <table id="tableD"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table> </div> <script> /* 1列挿入 */ function fTalbeInsertRow(){ var tObj=document.getElementById("tableD"); for(var i in tObj.rows){ if(tObj.rows[i].tagName=="TR"){ for(var j=0; j<1; j++){ tObj.rows[i].insertCell(j); tObj.rows[i].cells[j].innerHTML=tObj.rows[i].cells.length; } } } } /* 1列削除 */ function fTalbeDeleteRow(){ var tObj=document.getElementById("tableD"); for(var i in tObj.rows){ if(tObj.rows[i].tagName=="TR"){ if(tObj.rows[i].cells.length>0){ for(var j=0; j<1; j++){ tObj.rows[i].deleteCell(j); } } } } } </script>
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |