表格删除案例

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. MySQL 锁的小结

    摘自:https://www.cnblogs.com/protected/p/6526857.html 关于数据库的各种锁的总结: 1.共享锁(又称读锁).排它锁(又称写锁): InnoDB引擎的锁机 ...

  2. SVN : 在SVN检测下来的Maven项目没有Maven标志

    在Ecplise使用import->从SVN检出项目, 检出的项目没有了 Maven标志 解决方案 右键点击项目->configure->Convert to Maven Proje ...

  3. 并发队列之ConcurrentLinkedQueue

    本来想着直接说线程池的,不过在说线程池之前,我们必须要知道并发安全队列:因为一般情况下线程池中的线程数量是一定的,肯定不会超过某个阈值,那么当任务太多了的时候,我们必须把多余的任务保存到并发安全队列中 ...

  4. Android触摸事件传递机制，这一篇就够了

    整个触摸事件牵涉到的是,Activity,View,ViewGroup三者的传递机制. 这个触摸事件就是从外层往内层一层层的传递. 整个传递机制,分为3个步骤:分发,拦截,和消费. 1. 触摸事件的类 ...

  5. 6.场景4:使用VRRP(L3HA)和Open vSwitch提供高可用性

    此场景描述了使用ML2插件和Open vSwitch(OVS)实现OpenStack网络服务的高可用性实现. 该高可用性实施方案增加了以下情景:带有虚拟路由器冗余协议(VRRP)的Open vSwit ...

  6. 如何最快实现物流即使查询功能-物流轨迹查询API

    上一篇文章我们介绍了一个物流服务提供商,推荐大家使用快递鸟接口,主要介绍了如何注册账号,获得密钥,找不到注册地址的,我在发一下: http://kdniao.com/reg 今天我们来聊如何利用快递鸟 ...

  7. Airtest自动化测试工具介绍

    官方网站:http://airtest.netease.com/ Airtest IDE: 跨平台的UI自动化测试编辑器,适用于游戏和App,详细参见官网文档:http://airtest.netea ...

  8. Springboot笔记（二）整合

    1.整合Freemarker 一种模板引擎,前端渲染模板的,类似于EL,jsp,不过比前两个好用 导入很简单   pom.xml <dependency> <groupId>o ...

  9. LeetCode 343.整数拆分 - JavaScript

    题目描述:给定一个正整数 n,将其拆分为至少两个正整数的和,并使这些整数的乘积最大化. 返回你可以获得的最大乘积. 题目分析 题目中"n 至少可以拆分为两个正整数的和",这个条件说 ...

  10. 后台+下载（wget）+多个下载url

    有时候我们需要让linux下载多个文件,并且后台下载,不去占用当前控制台. 比如我们需要下载中文维基的三个文件: https://dumps.wikimedia.org/zhwiki/latest/z ...