实验5

最新推荐文章于 2021-11-24 16:07:24 发布

Key_F

最新推荐文章于 2021-11-24 16:07:24 发布

阅读量86

点赞数

文章标签： web

本文链接：https://blog.csdn.net/qq_45873798/article/details/116198304

版权

一、实验五

1.html

<!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>Document</title>
    <link rel="stylesheet" href="./css.css">
    <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="background">
        <div id="div1">
            <span class="span01">姓名:</span><input type="text" class="input01" id="name">
            <span class="span01">学号:</span><input type="text" class="input01" id="num">
            <br><br>
            <span class="span01">院系:</span><input type="text" class="input01" id="depart">
            <span class="span01">专业:</span><input type="text" class="input01" id="major">
            <input type="button" value="保存" id="btn1">
        </div>
        <div id="div2">
            <table>
                <tr>
                    <th class="sno">学号</th>
                    <th class="sname">姓名</th>
                    <th class="sdepart">院系</th>
                    <th class="smajor">专业</th>
                    <th class="option"></th>
                </tr>
            </table>
        </div>
    </div>
    <script src="./js.js"></script>
</body>

</html>

2.css

table {
    border: 1px solid #000;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #000;
    height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 10%;
}

#background {
    width: 1000px;
    height: 800px;
    margin: 50px auto;
}

#div1 {
    width: 750px;
    height: 160px;
    border: 2px solid rgb(77, 77, 77);
}

#div2 {
    width: 750px;
    height: 500px;
}

#btn1 {
    width: 45px;
    height: 30px;
    position: relative;
    top: 40px;
    left: 70px;
}

.input01 {
    margin-top: 10px;
    width: 250px;
    height: 25px;
}

.span01 {
    margin-top: 10px;
    margin-left: 10px;
    font-weight: 600;
}

.sno {
    width: 140px;
}

.sname {
    width: 60px;
}

.sdepart {
    width: 170px;
}

.smajor {
    width: 150px;
}

.option {
    width: 150px;
}

.spanOption1,
.spanOption2 {
    font-size: 20px;
    text-decoration: underline;
    color: indigo;
    cursor: pointer;
}

.span3 {
    margin: 0 2px;
}

3.js

$(function() {
    $.ajax({
        type: "GET",
        url: "http://60.205.177.189:8080/stu/getAllStu",
        datatype: "json",
        success: function(data) {
            for (var i = 0; i < data.data.length; i++) {
                console.log(data.data[i]);
                var tr = document.createElement("tr");
                var tdsno = document.createElement("td");
                tdsno.innerHTML = data.data[i].stuno;
                tdsno.setAttribute("class", "sno");
                var tdsname = document.createElement("td");
                tdsname.innerHTML = data.data[i].stuname;
                tdsname.setAttribute("class", "sname");
                var tdsdepart = document.createElement("td");
                tdsdepart.innerHTML = data.data[i].studepart;
                tdsdepart.setAttribute("class", "sdepart");
                var tdsmajor = document.createElement("td");
                tdsmajor.innerHTML = data.data[i].stumajor;
                tdsmajor.setAttribute("class", "smajor");
                var tdOption = document.createElement("td");
                var span1 = document.createElement("span");
                span1.setAttribute("class", "spanOption1")
                var span2 = document.createElement("span");
                span2.setAttribute("class", "spanOption2");
                span1.innerHTML = "修改";
                span2.innerHTML = "删除";
                var span3 = document.createElement("span");
                span3.innerHTML = "|";
                span3.setAttribute("class", "span3")
                tdOption.appendChild(span1);
                tdOption.appendChild(span3);
                tdOption.appendChild(span2);
                tdOption.setAttribute("class", "option");

                tr.appendChild(tdsno);
                tr.appendChild(tdsname);
                tr.appendChild(tdsdepart);
                tr.appendChild(tdsmajor);
                tr.appendChild(tdOption);
                $("table").append(tr);
            }

        },
        error: function() {
            alerrt("失败!");
        }
    })

    $(document).on("click", ".spanOption2", function() {
        var sno = $(this).parent().parent().children(".sno")[0].innerHTML;
        $.ajax({
            type: "POST",
            url: "http://60.205.177.189:8080/stu/delete/" + sno + " ",
            success: function() {
                alert("删除成功")
            },
            error: function() {
                alerrt("失败!");
            }
        })
    })
    $(document).on("click", ".spanOption1", function() {
        var sno = $(this).parent().parent().children(".sno")[0].innerHTML;
        var sname = $(this).parent().parent().children(".sname")[0].innerHTML;
        var sdepart = $(this).parent().parent().children(".sdepart")[0].innerHTML;
        var smajor = $(this).parent().parent().children(".smajor")[0].innerHTML;
        $("#name")[0].setAttribute("name", "1");
        $("#name")[0].value = sname;
        $("#num")[0].value = sno;
        $("#depart")[0].value = sdepart;
        $("#major")[0].value = smajor;

    })

    $("#btn1").click(function() {
        if ($("#name").eq(0).attr("name") === "1") {
            var student = {
                "stuno": $("#num")[0].value,
                "stuname": $("#name")[0].value,
                "studepart": $("#depart")[0].value,
                "stumajor": $("#major")[0].value
            }
            $.ajax({
                type: "POST",
                url: "http://60.205.177.189:8080/stu/update/" + $("#num")[0].value,
                datatype: "json",
                data: JSON.stringify(student),
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    alert("修改成功");
                },
                error: function() {
                    alert("失败!");
                }
            })
        } else {
            var name = $("#name").val();
            var num = $("#num").val();
            var depart = $("#depart").val();
            var major = $("#major").val();
            var student = {
                "stuno": num,
                "stuname": name,
                "studepart": depart,
                "stumajor": major
            }
            $.ajax({
                type: "POST",
                url: "http://60.205.177.189:8080/stu/addStu",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(student),
                success: function(data) {
                    alert("保存成功")
                },
                error: function() {
                    alert("失败!");
                }
            })
        }
    })

})

Key_F

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验5

一、实验五1.html<!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">
复制链接

扫一扫