使用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;" οnclick="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，加载一行，之后，再进行添加或删除行操作。

转载于:https://www.cnblogs.com/penny/archive/2008/09/13/1290474.html