复制代码 代码如下,本文实例讲述了jQuery动态生

作者: 前端  发布:2019-11-23

复制代码 代码如下:

图片 1 

本文实例讲述了jQuery动态生成表格及右键菜单功能。分享给大家供大家参考,具体如下:

  • Ajax 动态加载内容
  • jquery 弹出层 弹窗
  • php文件管理,可以点击按照时间,大小,名称排序
  • jQuery 二级菜单,一次显示一个小类 鼠标点击...
  • jQuery 滑动改变价格
  • jQuery 垂直滑动新闻展示
  • 投票喜欢/不喜欢 ajax无刷新
  • login and signup 注册和登录tab...
  • tooltip插件
  • Jquery 验证注册

复制代码 代码如下:

这里用的是 jquery 1.4.1 的库文件,具体代码如下:

<section>
<article class="left">
<p>
</p>
<ul>
<li><a href="" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li>
<li><a href="" title="jquery 弹出层 弹窗">jquery 弹出层 弹窗</a></li>
<li><a href="" title="php文件管理,可以点击按照时间,大小,名称排序">php文件管理,可以点击按照时间,大小,名称排序</a></li>
<li><a href="" title="jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类">jQuery 二级菜单,一次显示一个小类 鼠标点击...</a></li>
<li><a href="" title="jQuery 滑动改变价格">jQuery 滑动改变价格</a></li>
<li><a href="" title="jQuery 垂直滑动新闻展示">jQuery 垂直滑动新闻展示</a></li>
<li><a href="" title="投票喜欢/不喜欢 ajax无刷新">投票喜欢/不喜欢 ajax无刷新</a></li>
<li><a href="" title="login and signup 注册和登录tab页面">login and signup 注册和登录tab...</a></li>
<li><a href="" title="tooltip插件">tooltip插件</a></li>
<li><a href="" title="Jquery 验证注册">Jquery 验证注册</a></li>
</ul>
<ul>
<li><a href="" title="jquery 无刷新翻页">jquery 无刷新翻页</a></li>
<li><a href="" title="jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格">jquery表格可编辑修改表格里面的值,点击td变...</a></li>
<li><a href="" title="jquery实现简单的Tab切换菜单">jquery实现简单的Tab切换菜单</a></li>
<li><a href="" title="jQuery+Ajax+PHP+Mysql实现分页显示数据">jQuery+Ajax+PHP+Mysql实现分页...</a></li>
<li><a href="" title="类似京东和易迅的菜单-可以折叠隐藏的导航菜单">类似京东和易迅的菜单-可以折叠隐藏的导航菜单</a></li>
<li><a href="" title="jquery 翻页分页">jquery 翻页分页</a></li>
<li><a href="" title="Jquery 漂亮的select效果">Jquery 漂亮的select效果</a></li>
<li><a href="" title="jquery css多级下拉菜单">jquery css多级下拉菜单</a></li>
<li><a href="" title="highslide使用实例,点击图片放大效果,再次点击缩小">highslide使用实例,点击图片放大效果,再次...</a></li>
<li><a href="" title="无刷新动态加载数据,滚动条加载">无刷新动态加载数据,滚动条加载</a></li>
</ul>
<p><Br><Br></p>
</article>
</section>

<!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">
    CPU:<input type="text" id="txtCpu" /><br />
    主板:<input type="text" id="txtZhuban" /><br />
    内存:<input type="text" id="txtNeicun" /><br />
    硬盘:<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 无刷新翻页
  • jquery表格可编辑修改表格里面的值,点击td变...
  • jquery实现简单的Tab切换菜单
  • jQuery+Ajax+PHP+Mysql实现分页...
  • 类似京东和易迅的菜单-可以折叠隐藏的导航菜单
  • jquery 翻页分页
  • Jquery 漂亮的select效果
  • jquery css多级下拉菜单
  • highslide使用实例,点击图片放大效果,再次...
  • 无刷新动态加载数据,滚动条加载

<script src="jquery.headshrinker.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header').headshrinker({ fontSize: "17px", mobileMenu: true });
});
</script>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

代码如下: section article class="left" p /p ul lia href="" title="Ajax 动态加载内容"Ajax 动态加载内容/a/l...

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery动态生成不规则表格(前后端)
  • JQuery 动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery Ajax动态生成Table表格
  • Jquery 动态生成表格示例代码
  • jQuery实现多按钮单击变色
  • 用JQuery实现表格隔行变色和突出显示当前行的代码
  • jQuery代码实现表格中点击相应行变色功能
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
  • jquery实现表格中点击相应行变色功能效果【实例代码】
  • jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
  • jQuery实现动态生成表格并为行绑定单击变色动作的方法

本文由9159.com发布于前端,转载请注明出处:复制代码 代码如下,本文实例讲述了jQuery动态生

关键词:

上一篇:没有了
下一篇:没有了