这篇文章主要为大家展示了“jQuery如何动态生成表格及右键菜单功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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" > <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如何动态生成表格及右键菜单功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
