jQuery如何动态生成表格及右键菜单功能

这篇文章主要为大家展示了“jQuery如何动态生成表格及右键菜单功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何动态生成表格及右键菜单功能”这篇文章吧。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了泗洪免费建站欢迎大家使用！

这里用的是 jquery 1.4.1 的库文件，具体代码如下：

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



  
    
      
        编号CPU主板内存硬盘
      
    
  
  
  
    CPU：
    主板：
    内存：
    硬盘：
    
  
  
    

      
添加信息
      
删除信息
      
修改信息
      
保存信息