jQuery实现的简单动态添加、删除表格功能示例


Posted in jQuery onSeptember 21, 2017

本文实例讲述了jQuery实现的简单动态添加、删除表格功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

jQuery实现的简单动态添加、删除表格功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com 三水点靠木</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 410px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    td a.get {
      text-decoration: none;
    }
    a.del:hover {
      text-decoration: underline;
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
    .btnAdd {
      width: 110px;
      height: 30px;
      font-size: 20px;
      font-weight: bold;
    }
    .form-item {
      height: 100%;
      position: relative;
      padding-left: 100px;
      padding-right: 20px;
      margin-bottom: 34px;
      line-height: 36px;
    }
    .form-item > .lb {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100px;
      text-align: right;
    }
    .form-item > .txt {
      width: 300px;
      height: 32px;
    }
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.15;
      display: none;
    }
    .form-add {
      position: fixed;
      top: 30%;
      left: 50%;
      margin-left: -197px;
      padding-bottom: 20px;
      background: #fff;
      display: none;
    }
    .form-add-title {
      background-color: #f7f7f7;
      border-width: 1px 1px 0 1px;
      border-bottom: 0;
      margin-bottom: 15px;
      position: relative;
    }
    .form-add-title span {
      width: auto;
      height: 18px;
      font-size: 16px;
      font-family: 宋体;
      font-weight: bold;
      color: rgb(102, 102, 102);
      text-indent: 12px;
      padding: 8px 0px 10px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      text-align: left;
    }
    .form-add-title div {
      width: 16px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 30px;
      line-height: 16px;
      cursor: pointer;
    }
    .form-submit {
      text-align: center;
    }
    .form-submit input {
      width: 170px;
      height: 32px;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div>
    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
  </div>
  <table>
    <thead>
    <tr>
      <!-- <th><input type="checkbox" id="j_cbAll" /></th> -->
      <th>课程名称</th>
      <th>所属学院</th>
      <th>已学会</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>JavaScript</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>css</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>html</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>jQuery</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>
    </tr>
    </tbody>
  </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
  <div class="form-add-title">
    <span>添加数据</span>
    <div id="j_hideFormAdd">x</div>
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtLesson">课程名称:</label>
    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtBelSch">所属学院:</label>
    <input class="txt" type="text" id="j_txtBelSch" value="前端与移动开发学院">
  </div>
  <div class="form-submit">
    <input type="button" value="添加" id="j_btnAdd">
  </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("#j_btnAddData").click(function () {
      $("#j_mask").show();
      $("#j_formAdd").show();
      $("#j_txtLesson").val("");
      $("#j_txtBelSch").val("前端开发学院");
    });
    $("#j_hideFormAdd").click(function () {
      $("#j_mask").hide();
      $("#j_formAdd").hide();
    });
    $("#j_btnAdd").click(function () {
      var txtLesson = $("#j_txtLesson").val();
      var txtBelSch = $("#j_txtBelSch").val();
      if (txtLesson == "" || txtBelSch == "") {
        alert("课程名或者所属学院不能为空");
        return;
      }
      var str = '<tr>'
          + '<td>' + txtLesson + '</td>'
          + '<td>' + txtBelSch + '</td>'
          + '<td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>'
          + '</tr>';
      $("#j_tb").append(str);
      $("#j_mask").hide();
      $("#j_formAdd").hide();
    });
    $("#j_tb").on("click",".get",function(){
      $(this).parent().parent().remove();
    });
  });
</script>
</body>
</html>

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

jQuery 相关文章推荐
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
php中strtotime函数用法详解
2014/11/15 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP编写RESTful接口
2016/02/23 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
jQuery的一些注意
2006/12/06 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python requests.get带header
2020/05/05 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
项目副经理岗位职责
2013/12/30 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
公司保密承诺书
2014/03/27 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
团日活动总结书格式
2014/05/08 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
明星员工获奖感言
2014/08/14 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers
python manim实现排序算法动画示例
2022/08/14 Python