console 命令行工具 X clear

console

//提交添加
btn.click(function(){
    let student = {
        stuNo:$('#uname').val(),
        stuName:$('#email').val(),
        stuMajor: $('#salary').val()
    };
    console.log(JSON.stringify(student));
    $.get(
        'http://47.106.163.137/stu/InsertStu',
        {data: JSON.stringify(student)},
        function(rsp){
            console.log(rsp);
            if(rsp == "success"){        
                let uname = student.stuNo;
                let email = student.stuName;
                let salary = student.stuMajor;
                let html = "<tr><td>"+uname+"</td><td>"+email+"</td><td>"+salary+
                "</td><td><a href='#' onclick='deltr(this,"+uname+")'>Delete</a></td></tr>";
                table.append(html);
            }
        }
    )
});

//删除
function deltr(res,stuno){
    // console.log(res.parentNode.parentNode);
    $.get(        
        "http://47.106.163.137/stu/deleteStu",
        {stuNo:stuno},
        function(rsp) {
            console.log(rsp);
            console.log(stuno);
            if(rsp == "success"){
                res.parentNode.parentNode.remove();
            }
        }
    )
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="minimal-table.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <style>
    label, p{
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    p{
        text-align: center;
    }

    #btn{
        display: block;
        margin: auto;
        margin-top: 25px;
    }
    
    div{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    </style>
</head>
<body>
    <p>添加新学员</p>
    <form action="">
        <div>
            <span><label for="">stuNo:</label><input type="text" name="" id="uname"></span>
            <span><label for="">stuName:</label><input type="text" name="" id="email"></span>
            <span><label for="">stuMajor:</label><input type="text" name="" id="salary"></span>
        </div>
        <input type="button" name="" id="btn" value="Submit">
    </form>
    <hr/>
    <table id="start">
        <tr>
            <th>stuNo</th>
            <th>stuName</th>
            <th>stuMajor</th>
            <th>&nbsp;&nbsp;</th>
        </tr>
    </table>
    <script>
        let btn = $('#btn');
        let table = $('#start');

$(document).ready(function(){
    $.ajax({
        url: 'http://47.106.163.137/stu/getStuList',
        type: 'get',
        // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
        dataType: 'json',
        success: function (res) {
            // console.log(res[0].stuNo);
            for(let i=0; i<res.length;i++)
            {
                let stuno = res[i].stuNo;
                let stuname = res[i].stuName;
                let stumajor = res[i].stuMajor;
                let html = "<tr><td>"+stuno+"</td><td>"+stuname+"</td><td>"+stumajor+
                "</td><td><a href='#' onclick='deltr(this,"+stuno+")'>Delete</a></td></tr>";
                table.append(html);
            }
        }
            });
        });
    </script>
</body>

html {
    font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
    margin: auto;
}

td, th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
}

td {
    text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
}

caption {
    padding: 10px;
}

hr{
    margin-bottom: 25px;
    margin-top: 25px;
}