jQuery动态生成表格及右键菜单功能示例

"http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

varid = 0;

functionaddInfo() {

varcpu = document.getElementById("txtCpu");

varzhuban = document.getElementById("txtZhuban");

varneicun = document.getElementById("txtNeicun");

varyingpan = document.getElementById("txtYingpan");

vartb = document.getElementById("tbAdd");

//alert("数据插入成功！");

vartr = tb.insertRow();

vartd0 = tr.insertCell();

td0.innerHTML = id;

vartd1 = tr.insertCell();

td1.innerHTML = cpu.value;

vartd2 = tr.insertCell();

td2.innerHTML = zhuban.value;

vartd3 = tr.insertCell();

td3.innerHTML = neicun.value;

vartd4 = tr.insertCell();

td4.innerHTML = yingpan.value;

id++;

$("#tbAdd").append(tr);

}

$(function() {

varclickedTrIndex = -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() {

vartrIndex = $(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() {

vardeleteStr = $(this).children("a").attr("title");

if(deleteStr =="delete") {

$("#tbAdd tr:has(td):eq("+ clickedTrIndex +")").remove();

}

else{

alert("按下了："+ deleteStr);

}

});

});

#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;

}