<%--
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">«</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">»</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>
