2023.5.31每日总结

标签：总结 background color 31 2023.5 var currentPage page 2105
<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2023/5/29
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="softwareengin.teacher" %>
<%@ page import="softwareengin.AllMethods" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");%>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生主页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }

        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        /* 分页样式 */
        .pagination {
            display: inline-block;
            width: 100%;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: #fff;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .btn:hover {
            background-color: #3E8E41;
        }

        .btn:active {
            background-color: #3E8E41;
            transform: translateY(1px);
        }
        .my-link {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease-in-out;
        }

        .my-link:hover {
            color: #1E90FF;
        }

    </style>
</head>
<%
    String teaid="007";
    AllMethods allMethods=new AllMethods();
    teacher teacherr=allMethods.oneTeacher(teaid);
    int i=0;
%>
<body>
<div class="container">
    <h1>教师信息详情页面</h1>
    <a href="TeaEdit.jsp?teaid=<%=teacherr.teaid%>">查看和修改个人信息点此处</a>
    <a href="TeaCheckGrade.jsp?teaid=<%=teacherr.teaid%>">查看所教班级的学生成绩信息</a>
    <!-- 数据表格 -->
    <table id="myTable">
        <thead>
        <tr>
            <th>所授科目名称</th>
            <th>选择班级成绩</th>
            <th>录入成绩</th>
        </tr>
        </thead>
        <tbody>
        <%
        if(teacherr.tealesson1!=null)
        {
            %>
        <tr>
            <td><%=teacherr.tealesson1%></td>
            <td><select>
                <option>信2105-2</option>
                <option>信2105-3</option>
                <option>信2105-1</option>
            </select></td>
            <td><button class="btn"><a class="my-link" href="EnterGrades.jsp?lessonname=<%=teacherr.tealesson1%>">录入</a></button></td>
        </tr>
        <%
        }
        %>
        <%
            if(teacherr.tealesson2!=null)
            {
        %>
        <tr><td><%=teacherr.tealesson2%></td>
            <td><select>
                <option>信2105-2</option>
                <option>信2105-3</option>
                <option>信2105-1</option>
            </select></td>
            <td><button class="btn"><a class="my-link" href="EnterGrades.jsp?lessonname=<%=teacherr.tealesson2%>">录入</a></button></td>
        </tr>
        <%
            }
        %>
        <%
            if(teacherr.tealesson3!=null)
            {
        %>
        <tr><td><%=teacherr.tealesson3%></td>
            <td><select>
                <option>信2105-2</option>
                <option>信2105-3</option>
                <option>信2105-1</option>
            </select></td>
            <td><button class="btn"><a class="my-link" href="EnterGrades.jsp?lessonname=<%=teacherr.tealesson3%>">录入</a></button></td>
        </tr>
        <%
            }
        %>
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
        <a href="#" id="prev">&laquo;</a>
        <a href="#" class="active">1</a>
        <%
            int NumberOfPages=((20-4)/5)+1;
            for (int j=0;j<NumberOfPages;j++)
            {
        %>
        <a href="#"><%=1+j+1%></a>
        <%
            }
        %>
        <a href="#" id="next">&raquo;</a>
    </div>
</div>

<script>
    // 获取表格和分页元素
    var table = document.getElementById("myTable");
    var prevBtn = document.getElementById("prev");
    var nextBtn = document.getElementById("next");
    var paginationLinks = document.getElementsByClassName("pagination")[0].getElementsByTagName("a");

    // 每页显示的行数
    var rowsPerPage = 4;

    // 当前页码
    var currentPage = 1;

    // 计算总页数
    var totalRows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
    var totalPages = Math.ceil(totalRows / rowsPerPage);

    // 显示指定页码的表格内容
    function showPage(page) {
        // 计算页码对应的数据行范围
        var startRow = (page - 1) * rowsPerPage;
        var endRow = startRow + rowsPerPage;

        // 显示对应页码的数据行，隐藏其他行
        var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
        for (var i = 0; i < rows.length; i++) {
            if (i >= startRow && i < endRow) {
                rows[i].style.display = "table-row";
            } else {
                rows[i].style.display = "none";
            }
        }

        // 更新分页链接的样式
        for (var j = 0; j < paginationLinks.length; j++) {
            if (j == page) {
                paginationLinks[j].classList.add("active");
            } else {
                paginationLinks[j].classList.remove("active");
            }
        }

        // 更新当前页码
        currentPage = page;

        // 禁用/启用上一页和下一页按钮
        if (currentPage == 1) {
            prevBtn.classList.add("disabled");
        } else {
            prevBtn.classList.remove("disabled");
        }
        if (currentPage == totalPages) {
            nextBtn.classList.add("disabled");
        } else {
            nextBtn.classList.remove("disabled");
        }
    }

    // 初始化显示第一页的表格内容
    showPage(currentPage);

    // 绑定上一页和下一页按钮的点击事件
    prevBtn.addEventListener("click", function (event) {
        event.preventDefault();
        if (currentPage > 1) {
            showPage(currentPage - 1);
        }
    });
    nextBtn.addEventListener("click", function (event) {
        event.preventDefault();
        if (currentPage < totalPages) {
            showPage(currentPage + 1);
        }
    });

    // 绑定分页链接的点击事件
    for (var k = 0; k < paginationLinks.length; k++) {
        paginationLinks[k].addEventListener("click", function (event) {
            event.preventDefault();
            var page = parseInt(this.innerText);
            if (!isNaN(page)) {
                showPage(page);
            }
        });
    }
</script>
</body>
</html>
标签：总结,background,color,31,2023.5,var,currentPage,page,2105
From： https://www.cnblogs.com/wllovelmbforever/p/17447469.html
相关文章

赞助商

阅读排行
