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 |