在前面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，加载一行，之后，再进行添加或删除行操作。
