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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
jquery等待效果示例
May 01 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
example2.php
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php之curl设置超时实例
2014/11/03 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel find in set排序实例
2019/10/09 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python中 logging的使用详解
2017/10/25 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
学习新党章思想汇报
2014/01/09 职场文书
目标责任书范文
2014/04/14 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书