本文实例讲述了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程序设计有所帮助。