PHP学校成绩系统实现点击平均分后显示隐藏的成绩明细表

实现方案 #

你需要的点击切换显隐是前端交互功能，不需要额外后端请求，用少量原生JavaScript即可实现，无需引入额外框架，具体操作如下：

1. 新增通用样式控制明细表默认隐藏 #

先在页面头部加入以下CSS代码，统一控制所有成绩明细表默认不显示：

/* 所有成绩明细表默认隐藏，预留顶部边距 */
.grade_table {
  display: none;
  margin-top: 20px;
}

2. 调整明细表结构 #

给你的成绩明细表新增通用类grade_table，匹配你现有的命名规则：

<div class="Note">
  <div style="width: 80%; min-width: 550px">
    <!-- 新增通用类grade_table -->
    <table class="grade_table grade_Fruehauf">
      <tr>
        <th>Fruehauf</th>
      </tr>
      <tr>
        <th>Deutsch</th>
        <th>3.5</th>
      </tr>
      <tr>
        <th>Math</th>
        <th>3.5</th>
      </tr>
      <tr>
        <th>Biologie</th>
        <th>3.5</th>
      </tr>
      <tr>
        <th>Französisch</th>
        <th>4</th>
      </tr>
      <tr>
        <th>Durchschnitt</th>
        <th style="border-top:solid;">3.6</th>
      </tr>
    </table>
  </div>
</div>

3. 调整主表平均分链接规则 #

给所有可点击的平均分链接新增统一类avg_link，同时用自定义属性标记对应学生的姓氏，方便JS匹配对应明细表，你现有第一个学生的链接可以修改为：

// 数组最后一项按该规则调整，后续其他学生的平均分链接也按该格式生成
'<a href="javascript:;" class="avg_link Fruehauf" data-stu-surname="Fruehauf"><u>3.6</u></a>'

4. 新增JS实现切换逻辑 #

在页面底部加入以下原生JS代码，即可实现点击平均分显示对应明细表，点击其他平均分自动隐藏上一个明细表，再次点击当前平均分也可隐藏明细表：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有平均分点击链接
  const avgLinks = document.querySelectorAll('.avg_link');
  avgLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      // 获取当前点击的学生姓氏
      const stuSurname = this.dataset.stuSurname;
      // 匹配对应的成绩明细表
      const targetTable = document.querySelector('.grade_' + stuSurname);
      if (!targetTable) return;
      
      // 隐藏所有非当前的明细表
      document.querySelectorAll('.grade_table').forEach(table => {
        if (table !== targetTable) table.style.display = 'none';
      });
      
      // 切换当前明细表的显隐状态
      targetTable.style.display = targetTable.style.display === 'table' ? 'none' : 'table';
    })
  })
})

可选扩展：批量生成所有学生明细表 #

如果学生成绩都存储在PHP数组中，可直接循环生成所有学生的明细表，无需逐个手写，示例代码如下：

<?php
// 示例成绩数组，可根据你的实际数据结构调整
$stuGrades = [
  'Fruehauf' => [
    'Deutsch' => 3.5,
    'Math' => 3.5,
    'Biologie' => 3.5,
    'Französisch' => 4,
    'avg' => 3.6
  ],
  // 后续其他学生的成绩依次填入即可
];
foreach ($stuGrades as $surname => $grades) {
?>
<div class="Note">
  <div style="width: 80%; min-width: 550px">
    <table class="grade_table grade_<?php echo $surname; ?>">
      <tr>
        <th><?php echo $surname; ?></th>
      </tr>
      <?php foreach ($grades as $subject => $score) {
        if ($subject == 'avg') continue;
      ?>
      <tr>
        <th><?php echo $subject; ?></th>
        <th><?php echo $score; ?></th>
      </tr>
      <?php } ?>
      <tr>
        <th>Durchschnitt</th>
        <th style="border-top:solid;"><?php echo $grades['avg']; ?></th>
      </tr>
    </table>
  </div>
</div>
<?php } ?>

内容的提问来源于stack exchange，提问作者Angeline Ketelaar