最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery动态生成表格及右键菜单功能示例
时间:2022-06-25 17:22:08 编辑:袖梨 来源:一聚教程网
这里用的是 jquery 1.4.1 的库文件,具体代码如下:
代码如下 | 复制代码 |
"http://www.w3.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; }
|
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14