在表格中显示职员姓名、受试者姓名和最高分数

要在表格中显示职员姓名、受试者姓名和最高分数，你可以使用HTML和CSS来创建一个简单的表格，结合JavaScript来计算最高分数。以下是一个基本的示例：

HTML部分

<!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>

CSS部分（styles.css）

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

JavaScript部分（script.js）

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}`;
});

解释

HTML部分：定义了一个表格结构，包括表头和表体。表体部分将通过JavaScript动态填充数据。
CSS部分：简单的样式设置，使表格看起来更整洁。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 定义了一个包含职员姓名、受试者姓名和分数的数据数组。
- 遍历数据数组，动态创建表格行并插入到表体中。
- 计算并显示最高分数。