Tableオブジェクト｜formオブジェクト｜JavaScript/DOM

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();

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>

表題サンプル1
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

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）

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( 行番号 );

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

formオブジェクト Buttonオブジェクト

Tableオブジェクト Cellオブジェクト

PHP & JavaScript Room

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

Tableオブジェクト一覧

テーブルのセル情報を取得
cells[]

テーブルの行情報を取得
rows[]

テーブルの枠線を取得・設定
borderプロパティ

テーブルの表題を取得･設定／生成・削除
captionプロパティ

テーブルの外枠の表示方法を取得・設定
frameプロパティ

セルの内外余白を取得･設定
cellPadding/cellSpacingプロパティ

テーブルの幅を取得･設定
widthプロパティ

テーブルに1行挿入・1行削除
insertRow/deleteRowメソッド

最終行に1行挿入・最終行から1行削除

先頭に1行挿入・先頭から1行削除

関連コンテンツ

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

Tableオブジェクト一覧

テーブルのセル情報を取得cells[]

テーブルの行情報を取得rows[]

テーブルの枠線を取得・設定borderプロパティ

テーブルの表題を取得･設定／生成・削除captionプロパティ

テーブルの外枠の表示方法を取得・設定frameプロパティ

セルの内外余白を取得･設定cellPadding/cellSpacingプロパティ

テーブルの幅を取得･設定widthプロパティ

テーブルに1行挿入・1行削除insertRow/deleteRowメソッド

最終行に1行挿入・最終行から1行削除

先頭に1行挿入・先頭から1行削除

関連コンテンツ

テーブルのセル情報を取得
cells[]

テーブルの行情報を取得
rows[]

テーブルの枠線を取得・設定
borderプロパティ

テーブルの表題を取得･設定／生成・削除
captionプロパティ

テーブルの外枠の表示方法を取得・設定
frameプロパティ

セルの内外余白を取得･設定
cellPadding/cellSpacingプロパティ

テーブルの幅を取得･設定
widthプロパティ

テーブルに1行挿入・1行削除
insertRow/deleteRowメソッド