平时练习

标签：function currentRow val 练习平时 studentINFO var td
CRUD
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E6</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
</head>

<body>
    <div id="login">
        <p>
            <input type="text" id="username" class="form-control" placeholder="账号" />
        </p>
        <p>
            <input type="text" id="password" class="form-control" placeholder="密码" />
        </p>
        <p><button class="btn btn-primary btn-block">登录</button></p>
    </div>

    <div id="studentINFO"></div>
    <div id="addStudent"></div>
    <div id="modifyStudent"></div>
    <div id="deleteStudent"></div>
</body>

</html>

<script src="./jquery-3.6.4.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script></script>
<script>

    $(document).ready(function () {
        login();
        addStudedntINFO();
        modifyStudedntINFO();
        goBack();
        deleteStudentINFO();
    })

    function login() {
        $("#login button").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                type: "post",
                url: "http://114.67.241.121:8088/user/login?" + "username=" + username + "&password=" + password,
                async: false,
                complete: function (data) {
                    if (data.responseJSON.msg == "账号或密码错误") {
                        alert("账号或密码错");
                    }
                    else {
                        var token = data.responseJSON.data.token;
                        window.localStorage.setItem("token", token);

                        $("#login").hide();
                        $("#studentINFO").append("<table height='80%' class='table table-striped table-bordered table-hover table-condensed'><tr><td>stuaddess</td><td>stugender</td><td>stugrade</td><td>stuid</td><td>stumajor</td><td>stuname</td><td>stunative</td><td>stuno</td><td>stuphone</td><td>操作</td></tr></table>");
                        refreshStudentINFO();
                        $("#studentINFO").before("<div align='center'><button id='add' class='btn btn-info'>添加</button></div>");
                    }
                },
            })
        })
    }


    function refreshStudentINFO() {
        $.ajax({
            type: "get",
            url: "http://114.67.241.121:8088/stu/list",
            headers: {
                'Authorization': window.localStorage.getItem("token"),
            },
            async: false,
            complete: function (data) {
                var studentList = data.responseJSON.data;

                $("#studentINFO tr").not(":first").remove();
                for (var i = 0; i < studentList.length; i++) {
                    $("#studentINFO table").append(
                        "<tr>"
                        + "<td>" + studentList[i].stuaddess + "</td>"
                        + "<td>" + studentList[i].stugender + "</td>"
                        + "<td>" + studentList[i].stugrade + "</td>"
                        + "<td>" + studentList[i].stuid + "</td>"
                        + "<td>" + studentList[i].stumajor + "</td>"
                        + "<td>" + studentList[i].stuname + "</td>"
                        + "<td>" + studentList[i].stunative + "</td>"
                        + "<td>" + studentList[i].stuno + "</td>"
                        + "<td>" + studentList[i].stuphone + "</td>"
                        + "<td>" + "<button class='btn btn-warning'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>修改</button>"
                        + "<button class='btn btn-danger'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span>删除</button>" + "</td>"
                        + "</tr>"
                    );
                }
            }
        })
    }

    function addStudedntINFO() {
        $("body").on("click", "#add", function () {
            console.log("!");
            $("#studentINFO").hide();
            $("#addStudent").show();
            $("#addStudent").append(
                "<p>stuaddess: <input type='text' id='stuaddess' /></p>"
                + "<p>stugender: <input type='text' id='stugender' /></p>"
                + "<p>stugrade: <input type='text' id='stugrade' /></p>"
                + "<p>stuid: <input type='text' id='stuid' /></p>"
                + "<p>stumajor: <input type='text' id='stumajor' /></p>"
                + "<p>stuname: <input type='text' id='stuname' /></p>"
                + "<p>stunative: <input type='text' id='stunative' /></p>"
                + "<p>stuno: <input type='text' id='stuno' /></p>"
                + "<p>stuphone: <input type='text' id='stuphone' /></p>"
                + "<div><button style='float: left;' id='confirmAdd' class='btn btn-success'>添加</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>"
            );
            $("p").css({ "width": "200px" });

            $("#confirmAdd").click(function () {
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/add",
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                        "Content-Type": "application/json",
                    },
                    async: false,
                    data:
                        JSON.stringify({
                            stuaddess: $("#stuaddess").val(),
                            stugender: $("#stugender").val(),
                            stugrade: $("#stugrade").val(),
                            stuid: $("#stuid").val(),
                            stumajor: $("#stumajor").val(),
                            stuname: $("#stuname").val(),
                            stunative: $("#stunative").val(),
                            stuno: $("#stuno").val(),
                            stuphone: $("#stuphone").val(),
                        }),
                })

                $("#addStudent").hide();
                $("#addStudent").empty();
                refreshStudentINFO();
                $("#studentINFO").show();
            })

        })
    }

    function modifyStudedntINFO() {
        $("body").on("click", "#studentINFO td button:nth-child(1)", function () {
            var currentRow = $(this).closest("tr");

            var currentstuaddess = currentRow.find("td:eq(0)").text();
            var currentstugender = currentRow.find("td:eq(1)").text();
            var currentstugrade = currentRow.find("td:eq(2)").text();
            var currentstuid = currentRow.find("td:eq(3)").text();
            var currentstumajor = currentRow.find("td:eq(4)").text();
            var currentstuname = currentRow.find("td:eq(5)").text();
            var currentstunative = currentRow.find("td:eq(6)").text();
            var currentstuno = currentRow.find("td:eq(7)").text();
            var currentstuphone = currentRow.find("td:eq(8)").text();
            console.log(currentstuid);

            $("#add").hide();
            $("#studentINFO").hide();
            $("#modifyStudent").show();
            $("#modifyStudent").append(
                "<p>stuaddess: <input type='text' id='nstuaddess' /></p>"
                + "<p>stugender: <input type='text' id='nstugender' /></p>"
                + "<p>stugrade: <input type='text' id='nstugrade' /></p>"
                + "<p>stuid: " + currentstuid + "</p>"
                + "<p>stumajor: <input type='text' id='nstumajor' /></p>"
                + "<p>stuname: <input type='text' id='nstuname' /></p>"
                + "<p>stunative: <input type='text' id='nstunative' /></p>"
                + "<p>stuno: <input type='text' id='nstuno' /></p>"
                + "<p>stuphone: <input type='text' id='nstuphone' /></p>"
                + "<div><button  style='float: left;' id='confirmModify' class='btn btn-success'>修改</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>"
            );
            $("p").css({ "width": "200px" });

            $("#confirmModify").click(function () {
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/edit",
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                        "Content-Type": "application/json",
                    },
                    async: false,
                    data:
                        JSON.stringify({
                            "stuaddess": $("#nstuaddess").val(),
                            "stugender": $("#nstugender").val(),
                            "stugrade": $("#nstugrade").val(),
                            "stuid": currentstuid,
                            "stumajor": $("#nstumajor").val(),
                            "stuname": $("#nstuname").val(),
                            "stunative": $("#nstunative").val(),
                            "stuno": $("#nstuno").val(),
                            "stuphone": $("#nstuphone").val(),
                        }),
                })

                $("#modifyStudent").hide();
                $("#modifyStudent").empty();
                refreshStudentINFO();
                $("#studentINFO").show();
            })
        })
    }

    function goBack() {
        $("body").on("click", ".goBack", function () {
            $("#addStudent").hide();
            $("#addStudent").empty();
            $("#modifyStudent").hide();
            $("#modifyStudent").empty();
            $("#deleteStudent").hide();
            $("#deleteStudent").empty();
            refreshStudentINFO();
            $("#studentINFO").show();
            $("#add").show();
        })
    }

    function deleteStudentINFO() {
        $("body").on("click", "#studentINFO td button:nth-child(2)", function () {
            var currentRow = $(this).closest("tr");
            var deleteStuid = currentRow.find("td:eq(3)").text();

            $("#add").hide();
            $("#studentINFO").hide();
            $("#deleteStudent").show();
            $("#deleteStudent").append("<div class='label label-danger' style='font-size:20px;'>确定删除？</div> <div id='confirmDelete' style='margin-top:20px;'><button class='btn btn-danger'>确定</button><button style='margin-left:20px;' class='goBack btn btn-default'>返回</button></div>");
            $("#confirmDelete").css({ "margin-right": "25px", });

            $("#confirmDelete button:nth-child(1)").on("click", function () {
                // console.log("1");
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/del?stuid=" + deleteStuid,
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                    },
                    async: false,
                })
                $("#deleteStudent").hide();
                $("#deleteStudent").empty();
                refreshStudentINFO();
                $("#studentINFO").show();
            })

        })
    }

</script>

<style>
    #login,
    #studentINF,
    #addStudent,
    #modifyStudent,
    #deleteStudent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #studentINF {
        height: 80%;
        width: 80%;
    }
</style>
View Code
标签：function,currentRow,val,练习,平时,studentINFO,var,td
From： https://www.cnblogs.com/Sealgost/p/ES.html
相关文章

赞助商

阅读排行
