要在表格中显示职员姓名、受试者姓名和最高分数,你可以使用HTML和CSS来创建一个简单的表格,结合JavaScript来计算最高分数。以下是一个基本的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>职员和受试者分数表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="scoreTable">
<thead>
<tr>
<th>职员姓名</th>
<th>受试者姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<!-- 数据将通过JavaScript动态插入 -->
</tbody>
</table>
<div id="maxScore"></div>
<script src="script.js"></script>
</body>
</html>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
document.addEventListener("DOMContentLoaded", function() {
const data = [
{ employeeName: "张三", subjectName: "李四", score: 85 },
{ employeeName: "王五", subjectName: "赵六", score: 92 },
{ employeeName: "李七", subjectName: "孙八", score: 78 }
];
const tableBody = document.querySelector("#scoreTable tbody");
let maxScore = 0;
data.forEach(item => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${item.employeeName}</td>
<td>${item.subjectName}</td>
<td>${item.score}</td>
`;
tableBody.appendChild(row);
if (item.score > maxScore) {
maxScore = item.score;
}
});
document.getElementById("maxScore").innerText = `最高分数: ${maxScore}`;
});
DOMContentLoaded
事件确保DOM完全加载后再执行脚本。这个示例可以用于任何需要显示职员和受试者分数的场景,例如:
通过这种方式,你可以创建一个简单但功能齐全的表格来显示职员姓名、受试者姓名和最高分数。
领取专属 10元无门槛券
手把手带您无忧上云