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

2019-11-19 17:57:40

字体：大中小

来源：转载

供稿：网友

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

上一篇：微信小程序增、删、改、查操作实例详解

下一篇：Vue数据驱动模拟实现5