Cellオブジェクト｜Tableオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room

Cellオブジェクト｜Tableオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room

TOP JavaScript/DOMCellオブジェクト

Cellオブジェクト一覧
セルの水平・垂直位置を取得・設定〔align/vAlignプロパティ〕
セルのインデックス番号を取得〔cellIndexプロパティ〕
セルのcolspan属性・rowspan属性を取得・設定〔colSpan/rowSpanプロパティ〕
セル内のHTML文を取得・設定〔innerHTMLプロパティ〕
セルの幅を取得・設定〔widthプロパティ〕

Cellオブジェクト一覧

2007/7/14

プロパティ	説明
align	セルの水平位置を取得・設定
cellIndex	セルのインデックス番号を取得
colSpan	セルのcolspan属性をを取得・設定
rowSpan	セルのrowspan属性を取得・設定
innerHTML	セル内のHTML文を取得・設定
vAlign	セルの垂直位置を取得・設定
width	セルの幅を取得・設定

セルの水平・垂直位置を取得・設定
align/vAlignプロパティ

2007/7/14

Cellオブジェクト.align = left | center | right
Cellオブジェクト.vAlign = top | middle | bottom

alignプロパティは、セル（th要素、td要素）の水平位置を取得・設定します。
vAlignプロパティは、セル（th要素、td要素）の垂直位置を取得・設定します。

サンプルを見る

<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="fCellAlign(this.value)">
    <input type="button" value="center" onclick="fCellAlign(this.value)">
    <input type="button" value="right" onclick="fCellAlign(this.value)">
</p>
<p>
    垂直位置:
    <input type="button" value="top" onclick="fCellvAlign(this.value)">
    <input type="button" value="middle" onclick="fCellvAlign(this.value)">
    <input type="button" value="bottom" onclick="fCellvAlign(this.value)">
</p>
<p id="resCellAlign"></p>
<p id="resCellvAlign"></p>

<script>
    /* セルの水平位置を取得・設定 */
    function fCellAlign(_align){
        var s="";
        var tObj=document.getElementById("tableA");
        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]!=null){
                        if(tObj.rows[i].cells[j].nodeName=="TH" || tObj.rows[i].cells[j].nodeName=="TD"){
                            tObj.rows[i].cells[j].align=_align;
                            s+="rows["+i+"].cells["+j+"].align = "+tObj.rows[i].cells[j].align+"<br>";
                        }
                    }
                }
            }
        }
        document.getElementById("resCellvAlign").innerHTML="";
        document.getElementById("resCellAlign").innerHTML=s;
    }
    /* セルの垂直位置を取得・設定 */
    function fCellvAlign(_valign){
        var s="";
        var tObj=document.getElementById("tableA");
        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]!=null){
                        if(tObj.rows[i].cells[j].nodeName=="TH" || tObj.rows[i].cells[j].nodeName=="TD"){
                            tObj.rows[i].cells[j].vAlign=_valign;
                            s+="rows["+i+"].cells["+j+"].vAlign = "+tObj.rows[i].cells[j].vAlign+"<br>";
                        }
                    }
                }
            }
        }
        document.getElementById("resCellAlign").innerHTML="";
        document.getElementById("resCellvAlign").innerHTML=s;
    }
</script>

item1	1-1	1-2	1-3
item2	2-1	2-2	2-3
item3	3-1	3-2	3-3

水平位置:

垂直位置:

セルのインデックス番号を取得
cellIndexプロパティ

2007/7/14

Cellオブジェクト.cellIndex = インデックス番号

cellIndexプロパティは、セル（th要素、td要素）のインデックス番号を取得します。

サンプルを見る

<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="fGetCellIndex()" /></p>
<p id="resGetCellIndex"></p>

<script>
    function fGetCellIndex(){
        var s="";
        var tObj=document.getElementById("tableB");
        for(var i in tObj.rows){
            if(tObj.rows[i].cells!=null){
                for(var j in tObj.rows[i].cells){
                    //if(tObj.rows[i].cells[j].nodeName=="TH" || tObj.rows[i].cells[j].nodeName=="TD"){
                    if(tObj.rows[i].cells[j].cellIndex!=undefined){
                        s+="rows["+i+"].cells["+j+"].cellIndex = "+tObj.rows[i].cells[j].cellIndex+"<br>";
                    }
                }
            }
        }
        document.getElementById("resGetCellIndex").innerHTML=s;
    }
</script>

item1	1-1	1-2	1-3
item2	2-1	2-2	2-3
item3	3-1	3-2	3-3

セルのcolspan属性・rowspan属性を取得・設定
colSpan/rowSpanプロパティ

2007/7/14

Cellオブジェクト.colSpan = 数値
Cellオブジェクト.rowSpan = 数値

サンプルを見る

<p>
    <input type="button" value="td2のcolspan属性に3を設定" onclick="fTableC('td2',3)">
    <input type="button" value="td2のrowspan属性に3を設定" onclick="fTableR('td2',3)">
    <input type="button" value="元に戻す" onclick="fTableC('td2',1);fTableR('td2',1)">
</p>

<div class="tbl">
    <table>
        <tr><th>item1</th><td id="td1">1-1</td><td>1-2</td><td>1-3</td></tr>
        <tr><th>item2</th><td id="td2">2-1</td><td>2-2</td><td>2-3</td></tr>
        <tr><th>item3</th><td id="td3">3-1</td><td>3-2</td><td>3-3</td></tr>
    </table>
</div>

<script>
    function fTableC(id,num){
        document.getElementById(id).colSpan=num;
    }
    function fTableR(id,num){
        document.getElementById(id).rowSpan=num;
    }
</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

Cellオブジェクト.innerHTML = HTML文

innerHTMLプロパティは、セル（th要素、td要素）内の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="10"></textarea>
</p>

<script>
    function fGetInnerHTML(){
        var s="";
        var tObj=document.getElementById("tableC");
        for(var i in tObj.rows){
            if(tObj.rows[i].cells!=null){
                for(var j in tObj.rows[i].cells){
                    if(tObj.rows[i].cells[j].nodeName=="TH" || tObj.rows[i].cells[j].nodeName=="TD"){
                        s+=tObj.rows[i].cells[j].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

セルの幅を取得・設定
widthプロパティ

2007/7/14

Cellオブジェクト.width = 数値(pixel) | auto | %

widthプロパティは、セルの幅を取得・設定します。
指定可能な値は、数値（pixel単位）、"auto"（自動）、パーセントです。

サンプルを見る

<p>
    セルの幅: <span id="resTableWidth" class="hi"></span><br>
    <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>

<table id="tableD" 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("tableD");
        tObj.width=pixel;
        document.getElementById("resTableWidth").innerHTML=tObj.width;
    }
</script>

formオブジェクト Tableオブジェクト

Tableオブジェクト Rowオブジェクト

独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】

関連コンテンツ

pagetop