表格删除案例

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. Spring Cloud中Eureka注册显示UNKNOWN问题

    这是由于application.yml里spring没有配置实例造成的

  2. Maven 项目无法在Ecplise加进tomcat server

    当把用Maven项目 加进 tomcat server 时,出现 "There are no resources that can be added or removed from the ...

  3. 暑假第二周总结（在centos系统中安装eclipse出错，改为安装ubantu）

    本周试着在centos6.4系统上安装eclipse,在林子雨老师的教程所给的链接无法下载,后来找了许多的教程,即便是从官网下载之后,即便是安装好之后eclipse都无法正常启动,后来翻阅借阅的图书后 ...

  4. 最新2.7版本丨DataPipeline数据融合产品最新版本发布

    此次发布的2.7版本在进一步优化产品底层数据处理逻辑的同时更加注重提升用户在数据融合任务的日常管理.运行监控及资源分配等管理方面的功能增强与优化,力求帮助大家更为直观.便捷.稳定地管理数据融合任务,提 ...

  5. 大牛给的ACM进阶建议

    转:https://blog.csdn.net/mmy1996/article/details/56011084 来自知乎 在他后面的回答中发现 不用IDE ,修炼内功挺好的,不过他和我的以前的那种 ...

  6. Android Studio 学习笔记(一)环境搭建、文件目录等相关说明

    Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...

  7. Dapper系列 作者：懒懒的程序员一枚

    Dapper 第一篇简单介绍什么是小巧玲珑?Dapper如何工作安装需求方法参数结果常用类型 Dapper 第二篇 Execute 方法介绍描述存储过程Insert语句Update语句Delete语句 ...

  8. PYTHON 学习笔记3 元组、集合、字典

    前言 在上一节的学习中.学习了基本的流程控制语句,if-elif-else for while 等,本节将拓展上一节学习过的一些List 列表当中操作的一些基本方法,以及元祖.序列等. 列表扩展 我们 ...

  9. zabbix的mysql优化后的配置文件

    zabbix的mysql数据库导致磁盘IO一直90%以上,访问卡的一逼 改了配置文件最后好了 [root@root /]# cat /etc/my.cnf [mysqld] datadir=/Data ...

  10. Fastdfs php扩展访问

    一.安装FastDFS client php extension compiled under PHP 5.4 and PHP 7.0   1.安装php扩展,进入fastdfs源码文件夹中的  ph ...