表格删除案例

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. kaggle实战之 bag of words meet bag of poopcorn

    由于编辑器总是崩溃,我只能直接把代码贴上了. import numpy #first step import pandas as pd import numpy as np # Read data f ...

  2. 拒绝低效！Python教你爬虫公众号文章和链接

    本文首发于公众号「Python知识圈」,如需转载,请在公众号联系作者授权. 前言 上一篇文章整理了的公众号所有文章的导航链接,其实如果手动整理起来的话,是一件很费力的事情,因为公众号里添加文章的时候只 ...

  3. 未来JDK中将不再包含JDBC-ODBC桥

    今天才发现一个重要问题,java中居然没有这个桥了.让初学者真的泪流了! 甲骨文公司主要技术人员.JDBC规范领导者Lance Andersen今天在博客中称,从Java SE 8(java 1.8版 ...

  4. Android Studio 学习笔记(二)：布局简介和xmlns说明

    初学Android Studio,是在b站看的教程视频,这里的笔记也是以其为基础的,个人强烈安利: [天哥]Android开发视频教程最新版 Android Studio开发 Android 布局简介 ...

  5. DD boost你值得拥有

    也不知道什么时候就被赶到这条路上来了,只听领导的一声令下,备份啊能不能在异地也存一份呀?? 啊?? 领导语重心长的说你看啊,我们这个备份是这个样子的 现在的南京的两个工厂备份要在对方留一份备份的存档, ...

  6. qt creator源码全方面分析(2-5)

    目录 Creating Wizards in Code 介绍 相关类 IWizardFactory的设置器和获取器 Creating Wizards in Code 介绍 如果基于模板的自定义向导提供 ...

  7. ELF文件之五——使用链接脚本-2个函数-data-bss

    main.c int enable; ; int main() { ; } int add() { ; } bss段在elf中虽然size是4,但并不占filesize,节头表如下图所示 程序头中,项 ...

  8. opencv简单实用（cv2）

    一.介绍 安装:pip install opencv-python OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS ...

  9. FastDFS 配置文件 storage.conf

    FastDFS 版本5.05 配置文件分为三部分   控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfsstorage.co ...

  10. 如何用Java8 Stream API找到心仪的女朋友

    传统的的Java 集合操作是有些啰嗦的,当我们需要对结合元素进行过滤,排序等操作的时候,通常需要写好几行代码以及定义临时变量. 而Java8 Stream API 可以极大简化这一操作,代码行数少,且 ...