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开发的数独游戏代码
Oct 29 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
javascript制作2048游戏
Mar 30 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
如何根据业务封装自己的功能组件
Apr 19 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 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
php基础知识:函数基础知识
2006/12/13 PHP
php中JSON的使用与转换
2015/01/14 PHP
php检测文本的编码
2015/07/26 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python修改操作系统时间的方法
2015/05/18 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python读写压缩文件的方法
2020/07/30 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
读书活动实施方案
2014/03/10 职场文书
初三学习决心书
2014/03/11 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
化学教育专业自荐信
2014/07/04 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
大学学生会辞职信
2015/05/13 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
运动会宣传稿50字
2015/07/23 职场文书
特种设备安全管理制度
2015/08/06 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Python的property属性详细讲解
2022/04/11 Python