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

<!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. poj1852ant

    题意是这种,有一堆蚂蚁在一根棍子上乱爬.速度都是一样的,假设它们撞到了一起就会朝反方向爬去. 把棍子长度告诉你.还有蚂蚁的数量以及它们某时的距离棍子左端的距离.要求全部蚂蚁都掉到棍子以下去 的最小可能 ...

  2. iOS_截屏并裁剪

    截图使用场景: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fil ...

  3. HDOJ 题目2475 Box（link cut tree去点找祖先）

    Box Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. 初探C++运算符重载学习笔记&lt;2&gt; 重载为友元函数

    初探C++运算符重载学习笔记 在上面那篇博客中,写了将运算符重载为普通函数或类的成员函数这两种情况. 以下的两种情况发生.则我们须要将运算符重载为类的友元函数 <1>成员函数不能满足要求 ...

  5. linux下误删数据文件恢复

    linux下文件被删除能够用非常多工具进行恢复.比如undelete(适合ext2,ext3).giis(不能恢复安装giis之前的文件).ext3grep(仅限ext3).R-linux(支持ext ...

  6. WPF学习笔记：获取ListBox的选中项

    有代码有J8: UI <UserControl x:Class="UnitViews.UserListUV" xmlns="http://schemas.micro ...

  7. css list menu

    选择让page和folder都显示出来

  8. 解决无线网卡 RTL8723BE ubuntu环境下不稳定情况

    jiqing@ThinkPad:~$ lspci | grep -i net 00:19.0 Ethernet controller: Intel Corporation Ethernet Conne ...

  9. 68. 对Extjs中store的多种操作

    转自:https://www.cnblogs.com/exmyth/archive/2013/05/16/3082045.html 先来个声明,看着不错,贴过来的,没都测试过. Store.getCo ...

  10. Linux分区方式 及 Xshell远程连接排错

    第1章 远程连接 1.1 Linux远程连接软件 Windows:    Xshell/SecureCRT/Putty mac:         终端ssh命令或iterm2 Android:    ...