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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jquery不常用方法汇总
Jul 26 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
ES6 解构赋值的原理及运用
May 25 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python tkinter模版代码实例
2020/02/05 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
JDO的含义
2012/11/17 面试题
婚纱店策划方案
2014/05/22 职场文书
2014年团总支工作总结
2014/11/21 职场文书
绿里奇迹观后感
2015/06/15 职场文书
货款欠条范本
2015/07/03 职场文书
教师培训简讯
2015/07/20 职场文书
小学毕业感言200字
2015/07/30 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL