代码：基于事件冒泡原理和事件委托

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            background-color: rgb(238, 238, 238);

        }

        .clearfix:before {

            content: "";

            display: block;

            clear: both;

        }

        .hide {

            display: none;

        }

        /*table样式*/

        button {

            margin-right: 10px;

        }

        .btn-edit,

        .btn-del {

            margin: 0;

            padding: 2px;

            border: 1px solid gray;

        }

        #btn-add:hover,

        .btn-edit:hover,

        .btn-del:hover {

            color: indianred;

        }

        #btn-add, .btn-edit, .btn-del {

            background-color: silver;

        }

        /*modal样式*/

        .container-outer {

            border: 1px solid silver;

            width: 320px;

            height: 180px;

            background-color: rgb(238, 238, 238);

            margin: 0 auto;

        }

        .container-inner {

            width: 173px;

            margin: 0 auto;

            padding-top: 20px;

        }

        #modal-name,

        #modal-hobby,

        #btn-modal-submit,

        #btn-modal-cancel {

            line-height: 20px;

        }

        #btn-modal-submit,

        #btn-modal-cancel {

            background-color: rgb(51, 122, 183);

            border-radius: 10px;

            color: white;

            margin: 0;

        }

        #btn-modal-submit {

            float: left;

        }

        #btn-modal-cancel {

            float: right;

        }

    </style>

</head>

<body>

<button id="btn-add">新增</button>

<table id="tb1" border="1" cellspacing="0" cellpadding="0">

    <thead>

        <tr>

            <th>id</th>

            <th>name</th>

            <th>hobby</th>

            <th colspan="2">action</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>pd</td>

            <td>swimming</td>

            <td class="td">

                <button class="btn-edit">编辑</button>

            </td>

            <td class="td">

                <button class="btn-del">删除</button>

            </td>

        </tr>

        <tr>

            <td>2</td>

            <td>pd</td>

            <td>python</td>

            <td class="td">

                <button class="btn-edit">编辑</button>

            </td>

            <td class="td">

                <button class="btn-del">删除</button>

            </td>

        </tr>

    </tbody>

</table>

<div class="container-outer hide">

    <div class="container-inner clearfix hide">

        <p>

            <label for="modal-name"></label>

            <input type="text" id="modal-name" placeholder="姓名">

        </p>

        <p>

            <label for="modal-hobby"></label>

            <input type="text" id="modal-hobby" placeholder="爱好">

        </p>

        <span>

            <button id="btn-modal-submit">submit</button>

            <button id="btn-modal-cancel">cancel</button>

        </span>

    </div>

</div>

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/jquery-3.3.1.min.js"></script>

<script>

    // 定义一个弹出模态框的函数

    function showModal() {

        $(".container-outer,.container-inner").removeClass("hide");

    }

    // 定义一个隐藏模态框的函数

    function hideModal() {

        $(".container-outer,.container-inner").addClass("hide");

         $("#modal-name,#modal-hobby").val("");

    }

    // 给新增按钮绑定事件

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

        showModal();

    });

    // 模态框中的取消按钮绑定事件

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

        hideModal();

    });

    // 新增与编辑

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

        // 取到用户填写的input框的值

        let val_name = $("#modal-name").val();

        let val_hobby = $("#modal-hobby").val();

        // 取到（之前保存的当前行）

        let $currentTrEle = $("#tb1").data("currentTrEle");

        // 判断状态

        if ($currentTrEle !== undefined) {

            // 说明是编辑状态

            $currentTrEle.children().eq(1).text(val_name);

            $currentTrEle.children().eq(2).text(val_hobby);

            // 调用函数隐藏模态框

            hideModal();

            // 清空（之前保存的当前行）

            $("table").removeData();

        }else {

             // 创建tr标签，把数据填进去

            let trEle = document.createElement("tr");

            let num = $("tr").length;

            $(trEle).html("<td>"+num+"</td><td>"+val_name+"</td><td>"+val_hobby+"</td><td class=\"td\">" +

                "<button class=\"btn-edit\">编辑</button></td><td class=\"td\"><button class=\"btn-del\">删除" +

                "</button></td>");

           $("#tb1").append(trEle);

            // 调用函数隐藏模态框

            hideModal();

        }

    });

    // 给每一行的编辑按钮绑定事件

    // 使用事件委托，基于已存在的元素（页面加载完之后存在的标签）绑定事件

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

        // 调用显示模态框函数

        showModal();

        let $currentTrEle = $(this).parent().parent();

        // 把当前行的jQuery对象保存起来

        $("table").data("currentTrEle",$currentTrEle);

        let name = $currentTrEle.children().eq(1).text();

        let hobby = $currentTrEle.children().eq(2).text();

        $("#modal-name").val(name);

        $("#modal-hobby").val(hobby);

    });

    // 给每一行的删除按钮绑定事件

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

         // 删除（被点击的删除按钮的那一行）

         let $currentTrEle = $(this).parent().parent();

         // 更新序号

         // 找到当前行后面的所有的tr，依次更新序号

         $currentTrEle.nextAll().each(function () {

             // 取到原来的序号

             let oldNum = $(this).children().first().text();

             // 将原来的序号-1,再赋值回去

             $(this).children().first().text(oldNum-1);

         });

         $currentTrEle.remove();

     });

</script>

</body>

</html>

效果：

新增状态：

编辑状态：

jQuery练习：表单模态框的更多相关文章

  1. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  2. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  3. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  4. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  5. （四）Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  6. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  7. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  8. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  9. 第一百六十八节，jQuery，表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

随机推荐

  1. CSS自适应宽度的高级应用，一般人不会告诉你。

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAACdCAIAAAC4iknFAAAgAElEQVR4nO2d3VsTV7uH51/wqhKotn

  2. sed 之 模式空间 & 保持空间

    模式空间:容纳当前输入行的缓冲区: 保持空间:作为辅助的一个缓冲区,可以和模式空间进行交互,但是命令不能直接作用于保持空间. 由上面定义可以知道,模式空间和保持空间是两个独立的缓冲区,可以进行交互,命 ...

  3. How to use eclipse quickly

    --> // TODO Quickly find outstanding event 快速查找未完成事件        eg: // TODO Robin   --> Templates  ...

  4. 使用EL表达式正确情况下报错：javax.servlet.jsp cannot be resolved to a type

    这个错误可能是服务器自带的servlet库未导入的原因.右键项目属性,转到Targeted Runtimes,选择一个服务器,例如Tomcat,单击应用,可能就可以解决.

  5. JSP-Runoob：JSP 语法

    ylbtech-JSP-Runoob:JSP 语法 1.返回顶部 1. JSP 语法 本小节将会简单地介绍一下JSP开发中的基础语法. 脚本程序 脚本程序可以包含任意量的Java语句.变量.方法或表达 ...

  6. 软RAID管理

    软RAID管理 软RAID 软RAID 提供管理界面:mdadm 软RAID为空余磁盘添加冗余,结合了内核中的md(multi devices). RAID 设备可命名为/dev/md0./dev/m ...

  7. 【BZOJ4566_洛谷3181】[HAOI2016]找相同字符（SAM）

    自己yy的方法yyyyyyyy着就A了,写篇博客庆祝一下. 题目: 洛谷3181 分析: SAM(可能是)模板题(不会SAM的同学戳我:[知识总结]后缀自动机的构建). 对\(s1\)建出SAM,用\ ...

  8. 消息队列 (2) java实现简单的RabbtMQ

    假设有如下问题: 1.如果消费者连接中断,这期间我们应该怎么办? 2.如何做到负载均衡? 3.如何有效的将数据发送到相关的接收者?就是怎么样过滤 4.如何保证消费者收到完整正确的数据 5.如何让优先级 ...

  9. zblog插件增加后台导航栏的方法

    有时我们经常需要对插件进行设置,但是又不能让用户去做这些,那么下面的方法将会给插件增加在后台导航栏显示的功能 首先打开对应插件的文件夹,找到对应插件的  include.php  文件 将下面的代码粘 ...

  10. CommandBehavior.CloseConnection使用

    其用在ExecuteReader(c)中,返回对象前不能关闭数据库连接,须用CommandBehavior.CloseConnection: 这是一个关于实际知识点的问题,面试官考查的是应聘者数据库访 ...