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


Posted in Javascript onJanuary 13, 2017

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

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
Javascript闭包实例详解
Nov 29 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
js实现图片实时时钟
Jan 15 Javascript
Vue数据驱动模拟实现5
Jan 13 #Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 #Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 #Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 #Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
php类常量的使用详解
2013/06/08 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue debug 二种方法
2018/09/16 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
JavaScript实例 ODO List分析
2022/01/22 Javascript