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

実行結果

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

ソース

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

polarized women