首页 > 其他分享 >12.8

12.8

时间：2023-12-18 21:23:26浏览次数：23  
标签：document const tableContainer error 12.8 data row

STUDENT/student.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理页面</title>
    <style>
        .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;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">学生信息管理</h1>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="update">修改个人信息</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="select">浏览选课信息</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="choose">选课</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
    document.getElementById("update").addEventListener("click", function () {
        window.location.href = "1update.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('select').addEventListener('click', function () {
        window.location.href = "2select.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("choose").addEventListener("click", function () {
        window.location.href = "3choose.html?username=" + encodeURIComponent(username);
    });

</script>
</html>
复制代码

1update.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>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username + "  1");
    const requestUrl = `http://localhost:8080/student/getName/${username}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success') {
                generateTable(data.data, username);
                console.log(data);
            } else {
                alert("查找失败  " + data.msg);
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function update(username, name, s, college, p) {
        const requestUrl = 'http://localhost:8080/student/updateStu';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    studentID: username,
                    studentName: name,
                    studentSex: s,
                    studentClass: college,
                    studentMajor: p,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改角色成功");
                    console.log(data);
                    generateTable(data.data, username);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data, username) {
        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>';
        tableBody.appendChild(row);
        row = document.createElement("tr");
        row.innerHTML = `<td>${username}</td><td>${data.studentName}</td><td>${data.studentSex}</td><td>${data.studentClass}</td><td>${data.studentMajor}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<body>
<h1 style="text-align: center"></h1>
<div id="container">

</div>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <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="college">请输入所属班级</label>
                <input type="text" id="college">
                <br>
                <label for="major">请输入所属专业</label>
                <input type="text" id="major">
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username + "  2");
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const name = document.getElementById('name');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
            }
        });
        const college = document.getElementById('college');
        const major = document.getElementById('major');
        console.log(username + "   " + name.value + "   " + s + "  " + college.value + "  " + major.value);
        update(username, name.value, s, college.value, major.value);
    });
</script>
</html>
复制代码

2select.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览选课信息</title>
</head>
<body>
<h1 style="text-align: center">课程信息</h1>
<div id="container">

</div>
</body>
<script>
    const requestU = `http://localhost:8080/student/select`;
    fetch(requestU,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("未查询到此教师信息");
            }
        })
        .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>';

        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td><button type="button" id="search" onclick="redirectToSelectAll('${data[i].courseID}')">${data[i].courseID}</button></td><td>${data[i].courseName}</td><td>${data[i].courseCount}</td><td><button type="button" id="search" onclick="redirect('${data[i].courseTeacher}')">${data[i].courseTeacher}</button></td><td>${data[i].count}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }

    function redirectToSelectAll(n) {
        // 修改这里的路径为实际的 selectAll 页面路径
        window.location.href = `4selectCourse.html?name=${n}`;
    }

    function redirect(n) {
        // 修改这里的路径为实际的 selectAll 页面路径
        window.location.href = `5selectAll.html?name=${n}`;
    }
</script>
</html>
复制代码

3choose.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览选课信息</title>
</head>
<body>
<h1 style="text-align: center">课程信息</h1>
<div id="container">

</div>
</body>
<script>
    const requestU = `http://localhost:8080/student/choose`;
    fetch(requestU,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("未查询到此教师信息");
            }
        })
        .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>';

        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            if (data[i].courseCount > data[i].count) {
                row = document.createElement("tr");
                row.innerHTML = `<td>${data[i].courseID}</td><td>${data[i].courseName}</td><td>${data[i].courseCount}</td>${data[i].courseTeacher}</td><td>${data[i].count}</td><td><button class="reSet">选择</button></td>`;
                tableBody.appendChild(row);
                table.appendChild(tableBody);
                tableContainer.appendChild(table);
            }
        }
    }
</script>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username + "  1");
    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 requestUrl = `http://localhost:8080/student/cc/${id}`;
            fetch(requestUrl,
                {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },

                })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {

                        const name = data.data.courseTeacher;
                        const requestU = `http://localhost:8080/teacher/getByName/${name}`
                        fetch(requestU,
                            {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.msg === 'success') {
                                    count(id);
                                    const teacherID = data.data.teacherID;
                                    const requestUrl = `http://localhost:8080/student/choose1`;
                                    console.log(id + " " + teacherID + " " + username);
                                    fetch(requestUrl,
                                        {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            body: JSON.stringify({
                                                courseID: id,
                                                teacherID: teacherID,
                                                studentID: username,
                                            })
                                        })
                                        .then(response => response.json())
                                        .then(data => {
                                            if (data.msg === 'success') {
                                                console.log(data);
                                                generateTable(data.data);
                                                alert("选择成功")
                                            } else {
                                                alert("选择败");
                                            }
                                        })
                                        .catch(error => {
                                            alert("请求失败，请重试");
                                            console.error(error);
                                        });
                                } else {
                                    alert("重置失败");
                                }
                            })
                            .catch(error => {
                                alert("请求失败，请重试");
                                console.error(error);
                            });
                    } else {
                        alert("选择败");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    });
</script>
<script>
    function count(id) {
        const requestUrl = `http://localhost:8080/student/selectCourse/${id}`
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    const count = data.data.count + 1;
                    console.log("选课数量为" + count);
                    updateCourse(id, count);
                } else {
                    alert("选择败");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function updateCourse(id, count) {
        const requestUrl = `http://localhost:8080/student/updateCourse/${id}/${count}`
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("选课数量已改变");
                } else {
                    alert("选择败");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>
复制代码

4selectCourse.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 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;
        }
    </style>
</head>
<body>
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var name = urlParams.get('name');
    console.log("用户名为:" + name);
    const requestUrl = `http://localhost:8080/student/selectCourse/${name}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("查找失败");
            }
        })
        .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>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.courseID}</td><td>${data.courseName}</td><td>${data.courseCount}</td><td>${data.courseTeacher}</td><td>${data.count}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
</html>
复制代码

5selectAll.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 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;
        }
    </style>
</head>
<body>
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var name = urlParams.get('name');
    console.log("用户名为:" + name);
    const requestUrl = `http://localhost:8080/student/selectAll/${name}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("查找失败");
            }
        })
        .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>';
        tableBody.appendChild(row);
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.teacherID}</td><td>${data.teacherName}</td><td>${data.teacherSex}</td><td>${data.teacherCollege}</td><td>${data.position}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
</html>

标签：document,const,tableContainer,error,12.8,data,row
From： https://www.cnblogs.com/gjsgjs/p/17912310.html

相关文章

  • 12.8
    STUDENT/student.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>学生管理页面</title><style>.form{width:600px;margin:0au......
  • 12.8总结
    实验一：百度机器翻译SDK实验（2023.11.29日完成）  任务一：下载配置百度翻译Java相关库及环境（占10%）。    任务二：了解百度翻译相关功能并进行总结，包括文本翻译-通用版和文本翻译-词典版（占20%）。    任务三：完成百度翻译相关功能代码并测试调用，要求可以实现中文翻译成英文，英......
  • 12.8每日总结
    今天接着进行软件构造实验二packageVfx;importokhttp3.*;importorg.json.JSONObject;importjavax.swing.*;importjava.awt.*;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjava.io.IOException;importjava.nio.file.Files;......
  • 12.8日记
    RabbitMQ是一个开源的消息代理软件，它实现了高级消息队列协议（AMQP）标准。它的官方客户端提供了多种编程语言的接口，包括Python、Java和Ruby等。它支持消息的持久化、多种交换机类型、消息通知机制、灵活的路由和安全机制等。二、RabbitMQ工作原理RabbitMQ是由三部分组成的：生产......
  • 闲话12.8
    颓。上午把物理样卷2做了，AK了。然后看了一个小时生物就润去考生物了，没啥感觉，不会的也不多，勉强能上90pts？发现lyt的准考证上写的班级是B20......
  • 12.8 闲话
    K8这几天不在，原来是每天写3000道题，从一个连深搜都写的对的dalao成长为NOIAKer，创造了NOIP一百九十多省选600分的奇迹，这几天不在已经刷了24000道了我去今天我怎么疯狂被JC，错了哥原来\(K8\)说的二分图不重要说的是可以用网络流代替「重要提醒」：学过网络流后你会发现这玩意很不重......
  • 聪明办法学python-12.4——12.8笔记打卡
     python中Debug的方法  必要性：在于程序可能出现不符合预期结果的情况 困难：在于bug的出触发原因多种多样，只能看到最终结果 调试代码的基本思路：让bug在设计时更容易暴露出来，包括利用print和断言来解决简单问题，利用IDE进行调试 常见的错误：函数未定义会报错，需要检查函数......
  • FMC AD/DA 子卡 1 通道4GSPS 12bit ADC 采集 1 通道12.8GSPS 16bit DAC 回放
    概要QT7332是一款集成单通道ADC采集和单通道DAC回放的FMC板卡，ADC（ADC12J4000）转换速率最高为4GSPS，ADC位数12bit,DAC（AD9162）转换速率最高为12.8GSPS，DAC位数16bit；板卡支持触发输出/触发输入可调；触发/同步可选；采样时钟源支持内部参考时钟、外部参考时钟、外部采样时钟三种方式，可通过2个......
  • 闲话 Day12.8
    一如既往的，没有任何学术题材。果然还是太菜了啊。。。所以今天来点抽象东西。我是这个星球的一员。每天住在工厂，日夜不停的加班工作。周围还有好多好多的员工。他们就和我一样不知疲倦的工作着。我似乎从未考虑过工作的意义。或者说，可能我天天不带脑子吧。当然这也无所谓......
  • 统信UOS系统开发笔记（三）：从Qt源码编译安装之编译安装Qt5.12.8
    前言  上一篇，是使用Qt提供的安装包安装的，有些场景需要使用到自己编译的Qt，所以本篇如何在统信UOS系统上编译Qt5.12.8源码。<br>统信UOS系统版本  系统版本：  Qt源码下载  参考博文《获取下载Qt安装包，Qt源码全国网址备忘录（不用注册Qt账户，即可下载各版本Qt安装包和Qt源......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99