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 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
原生js实现贪吃蛇游戏
2020/10/26 Javascript
django模板加载静态文件的方法步骤
2019/03/01 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
年底个人总结范文
2015/03/10 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
初中生活随笔
2015/08/15 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
python opencv通过4坐标剪裁图片
2021/06/05 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android