PHP & JavaScript Room :: 設置サンプル

実行結果

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

ソース

<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>

polarized women