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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
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
德生9700DX电路分析
2021/03/02 无线电
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
喜之郎果冻广告词
2014/03/20 职场文书
金融事务专业求职信
2014/04/25 职场文书
娱乐节目策划方案
2014/06/10 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Redis 限流器
2022/05/15 Redis