Search
  1. Rowオブジェクト一覧
  2. 行の水平・垂直位置を取得・設定〔align/vAlignプロパティ〕
  3. 行のインデックス番号を取得〔rowIndexプロパティ〕
  4. 行内のHTML文を取得・設定〔innerHTMLプロパティ〕
  5. セルの挿入・削除〔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

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>
item11-11-21-3
item22-12-22-3
item33-13-23-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>
item11-11-21-3
item22-12-22-3
item33-13-23-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>
item11-11-21-3
item22-12-22-3
item33-13-23-3


セルの挿入・削除
insertCell/deleteCellメソッド

2007/7/14

Rowオブジェクト.deleteCell( セル番号 )
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>

12345
12345
12345
12345
12345

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women