表格增加，删除，修改

2022-01-26 12:31:49 阅读：201 来源： 互联网

标签：模态 function 表格删除修改 currentTrEle var hobby name

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>周末作业讲解</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #616161;
            opacity: 0.4;
            z-index: 998;
        }

        .modal {
            height: 200px;
            width: 300px;
            background-color: white;
            position: absolute;
            margin-top: -100px;
            margin-left: -150px;
            top: 50%;
            left: 50%;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Egon</td>
        <td>街舞</td>
        <td>
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>烫头</td>
        <td>
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>苑局</td>
        <td>日天</td>
        <td>
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
    <div>
        <p>
            <label for="modal-name">姓名</label>
            <input type="text" id="modal-name">
        </p>
        <p>
            <label for="modal-hobby">爱好</label>
            <input type="text" id="modal-hobby">
        </p>
        <p>
            <button id="modal-submit">提交</button>
            <button id="modal-cancel">取消</button>
        </p>
    </div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script>

    // 定义一个弹出模态框的函数
    function showModal() {
        $("#myCover,#myModal").removeClass("hide");
    }

    // 关闭模态框
    function closeModal() {
        // 1. 清空模态框中的input
        $("#myModal").find("input").val("");
        $("#myCover,#myModal").addClass("hide");
    }

    // 给新增按钮绑定事件
    $("#add").on("click", function () {
        // 把模态框弹出!
//        $("#myCover").removeClass("hide");
//        $("#myModal").removeClass("hide");
        showModal()
    });

    // 模态框中的取消按钮绑定事件
    $("#modal-cancel").on("click", function () {
        // 2. 隐藏模态框
        closeModal();

    });

    // 模态框中的提交按钮绑定事件
    $("#modal-submit").on("click", function () {
        // 1. 取到 用户 填写的 input框的值
        var name = $("#modal-name").val();  // 把用户在模态框里输入的姓名获取到,保存在name变量中
        var hobby = $("#modal-hobby").val();  // 把用户在模态框里输入的爱好获取到,保存在hobby变量中

        var $myModalEle = $("#myModal");
        // 判断,按需操作
        var $currentTrEle = $myModalEle.data("currentTr");
        if ($currentTrEle !== undefined) {
            // 说明是编辑状态
            $currentTrEle.children().eq(1).text(name);
            $currentTrEle.children().eq(2).text(hobby);

            // 清空之前保存的当前行
            $myModalEle.removeData();
        } else {
            // 创建tr标签把数据填进去
            var trEle = document.createElement("tr");
            var number = $("tr").length;
            $(trEle).html("<td>" + number + "</td>" +
                "<td>" + name + "</td>" +
                "<td>" + hobby + "</td>" +
                '<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
            );
            // 把创建好的tr添加到tbody中
            $("tbody").append(trEle);
        }
        // 隐藏模态框
        closeModal();
    });

    // 2. 根据是编辑 还是新增 做不同的操作
    // 2.1 如果是新增操作,就生成一条新的tr,加到table的最后
    // 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行
    // 难点在于 如何确定 编辑的是哪一行?  --> 利用data()可以存具体的jQuery对象

    // 给每一行的编辑按钮绑定事件
    // 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
    $("tbody").on("click", ".edit-btn", function () {
        // 把模态框弹出来
        showModal();
        // 把原来的数据填写到模态框中的input
        var $currentTrEle = $(this).parent().parent();

        // 把当前行的jQuery对象保存起来
        $("#myModal").data("currentTr", $currentTrEle);

        var name = $currentTrEle.children().eq(1).text();
        var hobby = $currentTrEle.children().eq(2).text();

        // 填
        $("#modal-name").val(name);
        $("#modal-hobby").val(hobby);
    });

    // 给每一行的删除按钮绑定事件
    $("tbody").on("click", ".delete-btn", function () {
        // 删除被点击的删除按钮的那一行
        var $currentTrEle = $(this).parent().parent();
        // 更新序号
        // 找到当前行后面所有的tr,依次更新序号
        $currentTrEle.nextAll().each(function () {
            // 取到原来的序号
            var oldNumber = $(this).children().first().text();
            // 将原来的序号-1,再赋值回去
            $(this).children().first().text(oldNumber - 1);
        });
        $currentTrEle.remove();

    });


</script>
</body>
</html>

标签：模态,function,表格,删除,修改,currentTrEle,var,hobby,name
来源： https://www.cnblogs.com/huxl1/p/15846099.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表格增加，删除，修改