jquery综合练习--模态对话框传值,删除,新增表格行

Posted 2021-02-09 robertx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery综合练习--模态对话框传值,删除,新增表格行相关的知识，希望对你有一定的参考价值。

效果示例:

技术图片

个人的练习代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }

        .cover{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #b0b0b0;
            opacity: 0.4;
            z-index: 2;
        }

        .modal{
            width: 500px;
            height: 400px;
            position: fixed;
            z-index: 3;
            background-color: white;
            left: 50%;
            top: 40%;
            margin-left: -250px;
            margin-top: -200px;

        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="cover hide"></div>

<div class="modal hide">
    <div>
        <label for="name">姓名</label><input type="text" id="name">
    </div>
    <div>
        <label for="hobby">爱好</label><input type="text" id="hobby">
    </div>
    <button id="cancel">取消</button>
    <button id="submit">提交</button>
</div>

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

<table border="1">
    <thead>
    <tr>
        <td>#</td>
        <td>姓名</td>
        <td>爱好</td>
        <td colspan="2" style="text-align: center">操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>小明</td>
        <td id="t1">抽烟,喝酒,烫头</td>
        <td><button class="move">删除</button></td>
        <td><button class="edit">编辑</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>贝吉塔</td>
        <td>修行,找布尔玛吃东西</td>
        <td><button class="move">删除</button></td>
        <td><button class="edit">编辑</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>孙悟空</td>
        <td>吃饭去界王星修炼</td>
        <td><button class="move">删除</button></td>
        <td><button class="edit">编辑</button></td>
    </tr>
    </tbody>
</table>

<script>

    // 新增按钮
    $("#add").click(function () {

        $("#name,#hobby").prop("value","");
        $(".cover,.modal").removeClass("hide");
    });

    // 取消按钮
    $("#cancel").click(function () {
        $(".cover,.modal").addClass("hide");
    });

    //删除行,用到事件委托,主要是因为新增的行不会自动添加按钮事件
    $("tbody").on("click",".move",function () {
        $(this).parent().parent().remove();
    });

    //提交
    $("#submit").click(function () {

        var name = $("#name").val();
        var hobby = $("#hobby").val();

        if($("#submit").data("k")){
            bt_edit = $("#submit").data("k");
            bt_edit.parent().prev().prev().prev().text(name);
            bt_edit.parent().prev().prev().text(hobby);
        }else{
            var s = "<tr>" +
            "        <td><input type="checkbox"></td>" +
            "        <td>"+name+"</td>" +
            "        <td>"+hobby+"</td>" +
            "        <td><button class="move">删除</button></td>" +
            "<td><button>编辑</button></td></tr>";
            $("tbody").append(s);

        }
        $(".cover,.modal").addClass("hide");
        $("#submit").data("k","");


    });

    //编辑
    $("tbody").on("click",".edit",function () {
        //设定一个标志位
        $("#submit").data("k",$(this));
        var name = $(this).parent().prev().prev().prev().text();
        var hobby = $(this).parent().prev().prev().text();
        console.log(name);
        $("#name").val(name);
        $("#hobby").val(hobby);
        $(".cover,.modal").removeClass("hide");

    })
</script>
</body>
</html>

以上是关于jquery综合练习--模态对话框传值,删除,新增表格行的主要内容，如果未能解决你的问题，请参考以下文章

jQuery练习--[实现左移右移功能,实现列表动态新增,删除功能；实现表格隔行变色,选中时高亮显示.]

JavaScript练习 - 模态对话框