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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
js对象的比较
2011/02/26 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
javascript实现简易计算器
2017/02/01 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Python中的自省(反射)详解
2015/06/02 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
激励口号大全
2014/06/17 职场文书
音乐教师求职信
2014/06/28 职场文书
2014年组织部工作总结
2014/11/14 职场文书
java代码实现空间切割
2022/01/18 Java/Android