使用JavaScript增加或刪除table的行

       在前面HTML中自訂右鍵菜單功能一文中，已經完成滑鼠右鍵菜單功能。其中，“增加一行”，“刪除一行”功能表項目還沒有給出單擊後的功能。那麼，JavaScript怎樣實現這一項功能呢？在這裡，用到的參數及html對象不跟前面HTML中自訂右鍵菜單功能一文中相匹配，而是另起爐灶，僅做一個小測試。

 

整理思路：

1. 在首頁面上定義button1作為“增加一行”的觸發器，使用button1的onclick事件

2. 在首頁面上定義button2作為“刪除一行”的觸發器，使用button2的onclick事件

3. 定義一個“id=modifyrow” 的div1，用於放置“行”

4. 在div1裡面，定義一個“id=createrow” 的隱藏的div2容器，關鍵是把屬性值display設為none

5. 在div2裡面，定義一個“id=modifytable” 的table對象，配合完成對table增加行或刪除行的操作，在這裡定義一行

6. 編寫JavaScript指令碼函數，功能：單擊div2時將table對象show出來；單擊button1時table對象增加一行；單擊button2時table對象刪除一行

 

把握關鍵點：

根據上面的思路，關鍵點有兩點，一個是單擊button1時table對象增加一行，另一個是單擊button2時table對象刪除一行

 

分析所需參數：

     e: 註冊事件

     isShow: bool類型值

     _id: div標籤ID

 

首頁面html對象的定義：

       <input id="button1" type="button" value="增加一行" onClick="createrow();"/>
       <input id="button2" type="button" value="刪除一行" onClick="deleterow();"/>  
        <div id="modifyrow" align="center" style="height:auto; width:auto; display:table;" onclick="setPosition(event,true,'createrow')">
            <span>creatrow</span>
            <div id="createrow" style="display:none">
                <table align="center" width="1000px;" height="20px" border="2" id="modifytable">
                    <tr align="left">
                        <td align="left">
                            <br>
                            <br>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

需要編寫指令碼function ：

1. 實現功能：單擊div2時將table對象show出來

   function setPosition(e,isShow,_id){
        var oDiv=document.getElementById(_id);
        if(isShow){
             var isIe=navigator.appName.indexOf("Microsoft")!=-1?true:false;
             oDiv.style.top=isIe?event.clientY+"px":e.pageY+"px";
             var iLeft=isIe?event.clientX-100:e.pageX;
             oDiv.style.left=iLeft+"px";
             if(isShow) oDiv.style.display="";
       }
       else
        oDiv.style.display="none";
    }

2. 實現功能：單擊button1時table對象增加一行

            function createrow(){
                var tr = modifytable.insertRow(modifytable.rows.length);
                var td;
                for (var i = 0; i < modifytable.rows[0].cells.length; i++) {
                    td = tr.insertCell();
                    td.innerHTML = "          <br> <br>    ";
                }
            }

3. 實現功能：單擊button2時table對象刪除一行

            function deleterow(){
                var oDiv = document.getElementById("createrow");
                if (oDiv.style.display != "none") {
                    if (modifytable.rows.length > 1) {
                        modifytable.deleteRow(1);
                    }
                    else {
                        oDiv.style.display = "none";
                    }
                }
            }

 

實現效果：

1. 頁面載入後，單擊“create row”，載入一行。

2. 點擊button1，便可以增加行。

3. 點擊button2，便可以刪除行。

說明：當頁面上沒有行之後，如果想繼續添加或刪除行。首先，點擊create row，載入一行，之後，再進行添加或刪除行操作。