jQuery动态生成表格及右键菜单功能示例
程序员文章站
2023-11-16 08:01:33
本文实例讲述了jquery动态生成表格及右键菜单功能。分享给大家供大家参考，具体如下：
这里用的是 jquery 1.4.1 的库文件，具体代码如下：
<...
本文实例讲述了jquery动态生成表格及右键菜单功能。分享给大家供大家参考，具体如下：
这里用的是 jquery 1.4.1 的库文件，具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var id = 0;
function addinfo() {
var cpu = document.getelementbyid("txtcpu");
var zhuban = document.getelementbyid("txtzhuban");
var neicun = document.getelementbyid("txtneicun");
var yingpan = document.getelementbyid("txtyingpan");
var tb = document.getelementbyid("tbadd");
//alert("数据插入成功！");
var tr = tb.insertrow();
var td0 = tr.insertcell();
td0.innerhtml = id;
var td1 = tr.insertcell();
td1.innerhtml = cpu.value;
var td2 = tr.insertcell();
td2.innerhtml = zhuban.value;
var td3 = tr.insertcell();
td3.innerhtml = neicun.value;
var td4 = tr.insertcell();
td4.innerhtml = yingpan.value;
id++;
$("#tbadd").append(tr);
}
$(function () {
var clickedtrindex = -1;
$("#addform>input[type=button]")
.live("click", function () {
$("#tbadd tr:has(td):even").css("background", "#ebebeb");
});
//绑定鼠标移入移出事件到表格的行
$("#tbadd tr:has(td)")
.live("mouseover", function () {
$(this).css("cursor", "pointer").css("background", "#bcc7d8");
})
.live("mouseleave", function () {
var trindex = $(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");
}
});
$("#contextmenu li")
.mouseover(function () {
$(this).css("background", "#c1d7ee");
})
.mouseout(function () {
$(this).css("background", "");
})
.click(function () {
var deletestr = $(this).children("a").attr("title");
if (deletestr == "delete") {
$("#tbadd tr:has(td):eq(" + clickedtrindex + ")").remove();
}
else {
alert("按下了：" + deletestr);
}
});
});
</script>
<style type="text/css">
#tbadd{
}
#tbadd tr td{ height:30px;
text-align:center;
}
#tbadd thead tr th{ width:90px;
height:30px;
text-align:center;
}
#addform input[type=text]{ margin-bottom:8px;
width:150px;
}
#contextmenu{ width:150px;
padding:5px 0px 5px 5px;
line-height:24px;
background-color:#f0f0f0;
position:absolute;
display:none;
}
#contextmenu ul{ margin:0px;
}
#contextmenu li{ margin:0px;
margin-left:-15px;
float:left;
width:100%;
list-style-type:none;
}
#contextmenu li a{ text-decoration:none;
padding:5px 0px 5px 12px;
display:block;
color:#282828;
}
</style>
</head>
<body oncontextmenu="return false;">
<div>
<table id="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 />
<div id="addform">
<span>cpu：</span><input type="text" id="txtcpu" /><br />
<span>主板：</span><input type="text" id="txtzhuban" /><br />
<span>内存：</span><input type="text" id="txtneicun" /><br />
<span>硬盘：</span><input type="text" id="txtyingpan" /><br />
<input type="button" value="添加信息" onclick="addinfo()" /><br />
</div>
<div id="contextmenu">
<ul>
<li><a href="#" title="add">添加信息</a></li>
<li><a href="#" title="delete">删除信息</a></li>
<li><a href="#" title="modify">修改信息</a></li>
<li><a href="#" title="save">保存信息</a></li>
</ul>
</div>
</div>
</body>
</html>
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery表格(table)操作技巧汇总》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery中ajax用法总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇： 详解Linux系统如何防止TCP洪水攻击
下一篇： js实现交通灯效果