jQuery动态生成表格及右键菜单功能示例
本文实例讲述了jQuery动态生成表格及右键菜单功能。分享给大家供大家参考，具体如下：
这里用的是jquery1.4.1的库文件，具体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
<scripttype="text/javascript">
varid=0;
functionaddInfo(){
varcpu=document.getElementById("txtCpu");
varzhuban=document.getElementById("txtZhuban");
varneicun=document.getElementById("txtNeicun");
varyingpan=document.getElementById("txtYingpan");
vartb=document.getElementById("tbAdd");
//alert("数据插入成功！");
vartr=tb.insertRow();
vartd0=tr.insertCell();
td0.innerHTML=id;
vartd1=tr.insertCell();
td1.innerHTML=cpu.value;
vartd2=tr.insertCell();
td2.innerHTML=zhuban.value;
vartd3=tr.insertCell();
td3.innerHTML=neicun.value;
vartd4=tr.insertCell();
td4.innerHTML=yingpan.value;
id++;
$("#tbAdd").append(tr);
}
$(function(){
varclickedTrIndex=-1;
$("#addForm>input[type=button]")
.live("click",function(){
$("#tbAddtr:has(td):even").css("background","#ebebeb");
});
//绑定鼠标移入移出事件到表格的行
$("#tbAddtr:has(td)")
.live("mouseover",function(){
$(this).css("cursor","pointer").css("background","#bcc7d8");
})
.live("mouseleave",function(){
vartrIndex=$(this).index();
if(trIndex%2==0){
$(this).css("background","#ebebeb");
}
else{
$(this).css("background","");
}
})
.live("mousedown",function(event){
if(event.button==2){
x=event.clientX;
y=event.clientY;
$("#contextMenu").css("display","block").css("left",x).css("top",y);
clickedTrIndex=$(this).index();
}
});
$("#contextMenu")
.mouseover(function(){
$(this).css("cursor","pointer");
});
$("body")
.live("mouseup",function(event){
if(event.button==0){
$("#contextMenu").css("display","none");
}
});
$("#contextMenuli")
.mouseover(function(){
$(this).css("background","#C1D7EE");
})
.mouseout(function(){
$(this).css("background","");
})
.click(function(){
vardeleteStr=$(this).children("a").attr("title");
if(deleteStr=="delete"){
$("#tbAddtr:has(td):eq("+clickedTrIndex+")").remove();
}
else{
alert("按下了："+deleteStr);
}
});
});
</script>
<styletype="text/css">
#tbAdd{
}
#tbAddtrtd{height:30px;
text-align:center;
}
#tbAddtheadtrth{width:90px;
height:30px;
text-align:center;
}
#addForminput[type=text]{margin-bottom:8px;
width:150px;
}
#contextMenu{width:150px;
padding:5px0px5px5px;
line-height:24px;
background-color:#F0F0F0;
position:absolute;
display:none;
}
#contextMenuul{margin:0px;
}
#contextMenuli{margin:0px;
margin-left:-15px;
float:left;
width:100%;
list-style-type:none;
}
#contextMenulia{text-decoration:none;
padding:5px0px5px12px;
display:block;
color:#282828;
}
</style>
</head>
<bodyonContextmenu="returnfalse;">
<div>
<tableid="tbAdd"cellpadding="0"cellspacing="0"border="1"style="border-collapse:collapse;">
<thead>
<tr>
<th>编号</th><th>CPU</th><th>主板</th><th>内存</th><th>硬盘</th>
</tr>
</thead>
</table>
<br/>
<divid="addForm">
<span>CPU：</span><inputtype="text"id="txtCpu"/><br/>
<span>主板：</span><inputtype="text"id="txtZhuban"/><br/>
<span>内存：</span><inputtype="text"id="txtNeicun"/><br/>
<span>硬盘：</span><inputtype="text"id="txtYingpan"/><br/>
<inputtype="button"value="添加信息"onclick="addInfo()"/><br/>
</div>
<divid="contextMenu">
<ul>
<li><ahref="#"title="add">添加信息</a></li>
<li><ahref="#"title="delete">删除信息</a></li>
<li><ahref="#"title="modify">修改信息</a></li>
<li><ahref="#"title="save">保存信息</a></li>
</ul>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。