Search

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

テーブルの枠線:

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

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

2007/7/14

Tableオブジェクト.frame = void | above | below | hsides | vsides | His | rhs | box | border

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>

テーブルの外枠の表示方法:

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

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

item33-13-23-3
item22-12-22-3
item11-11-21-3

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women