jQuery练习：表单模态框

最新推荐文章于 2022-06-22 09:18:40 发布

weixin_33725270

最新推荐文章于 2022-06-22 09:18:40 发布

阅读量249

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/believepd/p/9833331.html

版权

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

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