【vue】设计一个表格,增删改查,分页,固定列,特殊字符校验

fruge365

发布于 2025-12-15 09:41:50

1130

前言

前端二面试题，话不多说看题~

功能

1.表格 2.删除，编辑，新增

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        #d1 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .hide {
            display: none;
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

        #d2 {
            height: 300px;
            width: 600px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -120px;
        }
    </style>
</head>

<body>
    <div id="d1" class=" c1 hide"></div>
    <div id="d2" class=" c1 hide"></div>
    <div class="content">
        <input type="button" class="create" value="新增">
        <table border="1px" Cellspacing="0" Cellpadding="10">
            <thead>
                <tr class="title">
                    <th>#</th>
                    <th>姓名</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td class="name">EGon</td>
                    <td class='fav'>街舞</td>
                    <td><input type="button" class="add" value="编辑"> <input type="button" class="delete" value="删除">
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td class="name">ALEX</td>
                    <td class='fav'>理发</td>
                    <td><input type="button" class="add" value="编辑"> <input type="button" class="delete" value="删除">
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td class="name">小强</td>
                    <td class='fav'>二人转</td>
                    <td><input type="button" class="add" value="编辑"> <input type="button" class="delete" value="删除">
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <script src="http://unpkg.com/jquery"></script>
    <script>
        $(".create").on("click", function () {
            $(".c1").removeClass("hide")
            $("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit'  type='button' value='提交'><input  class='cancle' type='button' value='取消'></p>");

        })
        $("body").on("click", ".cancle", function () {
            $(".c1").addClass("hide")
        })
        $("body").on("click", ".submit", function () {
            if ($(".named").val() == "") {
                var nameVal = $(".named").val();
                var favVal = $(".fave").val();
                var xuHao = parseInt($("tr:last").children().first().text()) + 1
                console.log(xuHao, nameVal, favVal)
                var trEle = document.createElement("tr");
                $("tbody").append(trEle)
                $(trEle).html("<td class='q1'></td>, <td class='q2' ></td> ,<td class='q3'></td> ,<td><input type='button' value='编辑'><input type='button' class='delete' value='删除'></td>");
                $(".q1").text(xuHao);
                $(".q2").text(nameVal);
                $(".q3").text(favVal);
                $(".c1").addClass("hide");
            }
            else {
                var nameVal = $(".named").val();
                var favVal = $(".fave").val();
            }
        })
        $("body").on("click", ".delete", function () {
            $(this).parent().parent().remove()
        })
        $("body").on("click", ".add", function () {
            $(this).data("name", $(this).parent().siblings(".name").html());
            console.log($(this).data("name"));
            $(this).data("fav", $(this).parent().siblings(".fav").html());
            console.log($(this).data("fav"));
            $(".c1").removeClass("hide");
            $("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit'  type='button' value='提交'><input  class='cancle' type='button' value='取消'></p>");
            $(".named")[0].value = $(this).data("name");
            $(".fave")[0].value = $(this).data("fav");
            var nameVal = $(".named").val();
            var favVal = $(".fave").val();
            console.log(nameVal, favVal)
            var a1 = $(this).parent().siblings(".name")
            var a2 = $(this).parent().siblings(".fav")
            $("body").on("click", ".submit", function () {
                var nameVal = $(".named").val();
                var favVal = $(".fave").val();
                a1.html(nameVal)
                a2.html(favVal)
                console.log(nameVal, favVal)
                $(".c1").addClass("hide");
            })
        })

    </script>
</body>

</html>