本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
