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

<!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. Codeforces Round #329 (Div. 2)B. Anton and Lines 贪心

    B. Anton and Lines   The teacher gave Anton a large geometry homework, but he didn't do it (as usual ...

  2. git命令颜色设置

    + $ git config --global color.status auto + $ git config --global color.diff auto + $ git config --g ...

  3. 分类（category）是门学问

    分类的精细程度表现了人类的文明程度. 1. 学科分类 cybernetics:控制论:

  4. yii登陆中添加验证码

    1.在SiteController中添加如下代码: /** * Declares class-based actions. */ public function actions() { return  ...

  5. NS2学习笔记（三）

    代理(Agents) 代理是网络层数据包产生和使用的端点,用于实现多层的协议.Agent类部分用OTcl实现,部分用C++实现.C++的代码在~ns/agent.cc和~ns/agent.h中,OTc ...

  6. HTML--使用单选框、复选框，让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...

  7. 51nod 1577 线性基

    思路: http://blog.csdn.net/yxuanwkeith/article/details/53524757 //By SiriusRen #include <bits/stdc+ ...

  8. 363 Max Sum of Rectangle No Larger Than K 最大矩阵和不超过K

    Given a non-empty 2D matrix matrix and an integer k, find the max sum of a rectangle in the matrix s ...

  9. [转]linux之at指令详解

    转自:http://www.2cto.com/os/201409/336183.html 指令:at定时任务,指定一个时间执行一个任务,只能执行一次. 语法:# at [参数] [时间]at> ...

  10. <assert.h>

    Diagnostics 定义宏: void assert (scalar-expression); 若expression为0,则打印出错信息(类似Assertion failed: expressi ...