11.27

标签：const tableContainer 11.27 alert error document data

delete2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除部门</title>
</head>
<body>
<div id="container">

</div>
</body>
<script>
    display();

    function display() {
        const requestUrl = 'http://localhost:8080/user/selectCount';
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                    console.log(data);
                } else {
                    alert("查询失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>部门编号</td><td>部门名称</td><td>是否删除</td>';

        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].departmentID}</td><td>${data[i].departmentName}</td><td><button class="deleteButton">删除</button></td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树，找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("deleteButton")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const cardID = row.querySelector("td:first-child").textContent;
            cDep(cardID);
            // display(); // 重新显示数据
        }
    });
</script>
<script>
    function cDep(id) {
        const requestUrl = `http://localhost:8080/user/cDep/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data === 0) {
                    deleteDep(id);
                } else {
                    alert("仍有员工处于此部门中 无法删除");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function deleteDep(id) {
        const requestUrl = `http://localhost:8080/user/deleteDep/${id}`;
        fetch(requestUrl,
            {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("删除成功")
                } else {
                    alert("删除失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>

re.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置密码</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">重置学生密码</h1>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <label for="name">请输入工号</label>
            <input type="text" id="name">
            <button id="select" style="display: block; margin: 0 auto;">查询</button>
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>工号</td><td>姓名</td><td>性别</td><td>出生日期</td><td>部门</td><td>角色</td><td>密码</td><td>重置密码</td>';
        tableBody.appendChild(row);
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.jobID}</td><td>${data.name}</td><td>${data.sex}</td><td>${data.birthday}</td><td>${data.department}</td><td>${data.role}</td><td>${data.password}</td><td><button class="reSet">密码重置</button>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<script>
    document.getElementById('select').addEventListener('click', function () {
        const id = document.getElementById('name').value;
        const requestUrl = `http://localhost:8080/user/selectById/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    generateTable(data.data);
                } else {
                    alert("学生信息不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树，找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["reSet"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("reSet")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const id = row.querySelector("td:first-child").textContent;
            const new1 = "123456";
            const requestUrl = `http://localhost:8080/user/update/${id}/${new1}`
            fetch(requestUrl,
                {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        console.log(data);
                        alert("重置成功")
                    } else {
                        alert("重置失败");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    });
</script>
</html>

set.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色设置</title>
</head>
<body>
<div id="container">

</div>
</body>
<script>
    const requestUrl = 'http://localhost:8080/user/getStaff';
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success') {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("查询失败  " + data.msg);
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>工号</td><td>姓名</td><td>性别</td><td>出生日期</td><td>部门</td><td>角色</td><td>密码</td><td>定义角色</td>';
        tableBody.appendChild(row);
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].jobID}</td><td>${data[i].name}</td><td>${data[i].sex}</td><td>${data[i].birthday}</td><td>${data[i].department}</td><td>${data[i].role}</td><td>${data[i].password}</td><td><button class="deleteButton">定为经理</button></td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树，找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("deleteButton")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const cardID = row.querySelector("td:first-child").textContent;
            dDep(cardID);
            // display(); // 重新显示数据
        }
    });
</script>
<script>
    function  dDep(id)
    {
        const requestUrl = `http://localhost:8080/user/dDep`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data===0) {
                    updateRole(id);
                } else {
                    alert("当前已存在经理，无法更改");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function updateRole(id)
    {
        const requestUrl = `http://localhost:8080/user/updateRole/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改成功")
                } else {
                    alert("修改失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>

update1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息修改</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">添加信息</h1>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <label for="jobID">请输入要修改的ID:</label>
                <input type="text" id="jobID" name="jobID" minlength="8" maxlength="8" required>
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label>性别:</label>
                <div id="sex">
                    <label><input type="radio" name="sex" value="男">男</label>
                    <label><input type="radio" name="sex" value="女">女</label>
                </div>
                <br>
                <label for="birthday">请输入出生日期</label>
                <input type="date" id="birthday">
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const jobID = document.getElementById('jobID');
        const name = document.getElementById('name');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
            }
        });
        const birthday = document.getElementById('birthday');
        console.log(jobID.value + "   " + name.value + "   " + s + "  " + birthday.value + "  ");
        updateStaff(jobID.value, name.value, s, birthday.value);
    });
</script>
<script>
    function updateStaff(jobID, name, s, birthday) {
        const requestUrl = 'http://localhost:8080/user/updateStaff';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    jobID: jobID,
                    name: name,
                    sex: s,
                    birthday: birthday,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改信息成功");
                    console.log(data);
                } else {
                    alert("错误信息类型  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>>

update2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改部门信息</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">添加信息</h1>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <label for="jobID">请输入要修改的部门编号:</label>
                <input type="text" id="jobID" name="jobID" minlength="2" maxlength="2">
                <br>
                <label for="name">请输入名称</label>
                <input type="text" id="name">
                <br>
                <div id="container">

                </div>
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    display();

    function display() {
        const requestUrl = 'http://localhost:8080/user/selectCount';
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                    console.log(data);
                } else {
                    alert("查询失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>部门编号</td><td>部门名称</td>';

        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].departmentID}</td><td>${data[i].departmentName}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
<script>
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const jobID = document.getElementById('jobID');
        const name = document.getElementById('name');
        console.log(jobID.value + "   " + name.value );
        cDep(jobID.value, name.value);
    });
</script>
<script>
    function cDep(id,name)
    {
        const requestUrl = `http://localhost:8080/user/aDep/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data===0) {
                    alert("不存在此部门，请检查编号");
                } else if(data===1){
                    dDep(id,name);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function dDep(id,name)
    {
        const requestUrl =  `http://localhost:8080/user/bDep/${name}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data===0) {
                    addDep(id,name);
                } else {
                    alert("已存在所填名称  " );
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function addDep(jobID, name) {
        const requestUrl = 'http://localhost:8080/user/updateDep';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    departmentID:jobID,
                    departmentName:name
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改部门成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>>

标签：const,tableContainer,11.27,alert,error,document,data
From： https://www.cnblogs.com/zzqq1314/p/17910897.html

相关文章

赞助商

阅读排行