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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery编写QQ简易聊天框
Aug 27 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
PHP基础学习小结
2011/04/17 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
vue vant中picker组件的使用
2020/11/03 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python装饰器基础详解
2016/03/09 Python
Python WSGI的深入理解
2018/08/01 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python处理写入数据代码讲解
2020/10/22 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
用python制作个视频下载器
2021/02/01 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
司机职责范本
2014/03/08 职场文书
大二学习计划书范文
2014/04/27 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
方法汇总:Python 安装第三方库常用
2022/04/26 Python
MYSQL常用函数介绍
2022/05/05 MySQL