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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery实现图片轮播器
May 23 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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 URL编码解码函数代码
2009/03/10 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vue二级路由设置方法
2018/02/09 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
浅谈python中requests模块导入的问题
2018/05/18 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
基于python生成器封装的协程类
2019/03/20 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
简单了解django文件下载方式
2020/02/10 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
高中生学习计划书
2014/09/15 职场文书
2014年班主任工作总结
2014/11/08 职场文书
学籍证明模板
2014/11/21 职场文书
煤矿安全保证书
2015/02/27 职场文书
少年犯观后感
2015/06/11 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL