表格删除案例

on的简单事件

    //1. 找到清空按钮，注册点击事件，清空tbody

    $("#btn").on("click", function () {

      $("#j_tb").empty();

    });

on的委托事件

      //2. 找到delete，注册点击事件

      $("#j_tb").on("click", ".get", function () {

        $(this).parent().parent().remove();

      });

on的简单事件

      //3. 找到添加按钮,注册点击事件

      $("#btnAdd").on("click", function () {

        $('<tr> <td>jQuery111</td> <td>传智播客-前端与移动开发学院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");

      });

效果如下：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></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">

    <input type="button" value="清空内容" id="btn">

    <input type="button" value="添加" id="btnAdd">

    <table>

      <thead>

        <tr>

          <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:;" class="get">DELETE</a></td>

        </tr>

        <tr>

          <!-- <td><input type="checkbox"/></td> -->

          <td>css</td>

          <td>传智播客-前端与移动开发学院</td>

          <td><a href="javascrip:;" class="get">DELETE</a></td>

        </tr>

        <tr>

          <!-- <td><input type="checkbox"/></td> -->

          <td>html</td>

          <td>传智播客-前端与移动开发学院</td>

          <td><a href="javascrip:;" class="get">DELETE</a></td>

        </tr>

        <tr>

          <td>jQuery</td>

          <td>传智播客-前端与移动开发学院</td>

          <td><a href="javascrip:;" class="get">DELETE</a></td>

        </tr>

      </tbody>

    </table>

  </div>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //1. 找到清空按钮，注册点击事件，清空tbody

      $("#btn").on("click", function () {

        $("#j_tb").empty();

      });

      //2. 找到delete，注册点击事件

      $("#j_tb").on("click", ".get", function () {

        $(this).parent().parent().remove();

      });

      //3. 找到添加按钮,注册点击事件

      $("#btnAdd").on("click", function () {

        $('<tr> <td>jQuery111</td> <td>传智播客-前端与移动开发学院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");

      });

    });

  </script>

</body>

</html>

jQuery---表格删除案例的更多相关文章

  1. jQuery 表格删除，添加行

    var colsNum = 4; 1,$(document),ready(function () { $.("#id1").parent().after('<tr class ...

  2. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  5. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. 看完这篇文章，再次遇到Jedis「Redis客户端」异常相信你不再怕了！

    本文导读: [1] 疫情当前 [2] 应用异常监控 [3] Redis客户端异常分析 [4] Redis客户端问题引导分析 [5] 站在Redis客户端视角分析 [6] 站在Redis服务端视角分析 ...

  2. 开源虚拟机Bochs安装以及踩坑

    因为想要写一个简单的操作系统,所以需要安装虚拟机来模拟出硬件,VMware不适合这个场景,因为会使用硬件级别的虚拟化,而bochs这个开源虚拟机,是用软件虚拟了所有的硬件,所以调试可以做到非常细的粒度 ...

  3. NLP（二十）利用BERT实现文本二分类

      在我们进行事件抽取的时候,我们需要触发词来确定是否属于某个特定的事件类型,比如我们以政治上的出访类事件为例,这类事件往往会出现"访问"这个词语,但是仅仅通过"访问&q ...

  4. pycharm中的快捷键

    不断更新...... 1.整行向右缩进 方法:选中要向右缩进的代码,点击一次[Tab]键,向右进行一个缩进,点击2次就缩进2个[Tab]键 2.整行向左退[缩进] 方法:选中要退缩进的代码,同时点击[ ...

  5. 深入分析Java反射(三)-泛型

    前提 Java反射的API在JavaSE1.7的时候已经基本完善,但是本文编写的时候使用的是Oracle JDK11,因为JDK11对于sun包下的源码也上传了,可以直接通过IDE查看对应的源码和进行 ...

  6. POJ 1751 Highways(最小生成树Prim普里姆，输出边)

    题目链接:点击打开链接 Description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has ...

  7. 《Python学习手册 第五版》 -第10章 Python语句简介

    前面在开始讲解数据类型的时候,有说过Python的知识结构,在此重温一下 Python知识结构: 程序由模块组成 模块包含语句 语句包含表达式 表达式创建并处理对象 关于知识结构,前面已经说过我自己的 ...

  8. EMC networker nmm can restore and recover sqlserver as different name to different location

    EMC networker nmm can restore and recover sqlserver as different name to different location That is ...

  9. 搭建python运行环境

    一.下载Anaconda Anaconda是Python的包管理器和环境管理器 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 参考:ht ...

  10. 开发中常见的common.js--1

    common.js 1.基于代码重用的目的,方便在页面中调用: 2.跟普通的js包含文件并没有其他不一样,主要是一些js经常用到的函数,或者字符串.数组方法的简单扩展: 3.封装的兼容性的方法.[po ...