溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
