JavaScript计算学生成绩等级并生成表格遇阻求排查

我想用JavaScript写一个程序，根据学生分数计算成绩等级，然后把结果打印成表格。练习时遇到了问题——尝试用数组对象和forEach方法把计算后的等级输出到表格里，但代码跑不起来。下面是我写的代码：

// 原代码（修正HTML转义符号后）
const grade = student.filter(function (object, index, array) {
    if (grade < 60) {
        document.write('Grade is F.');
    }
    else if (grade >= 60 && grade < 70) {
        document.write('Grade is D.');
    }
    else if (grade >= 70 && grade < 80) {
        document.write('Grade is C.');
    }
    else if (grade >= 80 && grade < 90) {
        document.write('Grade is B.');
    }
    else if (grade >= 90 && grade < 100) {
        document.write('Grade is A.');
    }
    return object.grade();
})

student.forEach(function(value, index, array) {
    document.getElementById('-name').innerHTML = value.name;
    document.getElementById('-marks').innerHTML = value.marks;
    document.getElementById('-grade').innerHTML = value.grade;
})

原代码的问题分析 #

• 误用filter方法：filter的作用是筛选数组元素，返回符合条件的新数组，不是用来计算成绩等级的工具。这里应该直接遍历数组，给每个学生对象添加等级属性。
• 变量名冲突+逻辑错误：你定义了const grade，却在条件判断里拿这个变量和分数比较，实际上应该用每个学生的marks属性；另外object.grade()是错误写法，grade不是方法，且return的逻辑完全不对。
• DOM操作错误：用同一个ID给多个学生数据赋值，只会覆盖最后一个学生的内容；而且document.write会覆盖整个页面，不适合用来构建表格。

修正后的完整代码 #

<!-- HTML结构 -->
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>分数</th>
            <th>等级</th>
        </tr>
    </thead>
    <tbody id="student-table-body"></tbody>
</table>

<script>
// 示例学生数组
const students = [
    { name: "张三", marks: 85 },
    { name: "李四", marks: 58 },
    { name: "王五", marks: 92 },
    { name: "赵六", marks: 76 }
];

// 计算成绩等级的函数
function calculateGrade(marks) {
    if (marks < 60) return "F";
    else if (marks >= 60 && marks < 70) return "D";
    else if (marks >= 70 && marks < 80) return "C";
    else if (marks >= 80 && marks < 90) return "B";
    else if (marks >= 90 && marks <= 100) return "A";
    else return "无效分数";
}

// 获取表格tbody元素
const tableBody = document.getElementById('student-table-body');

// 遍历学生数组，生成表格行
students.forEach(student => {
    // 创建行和单元格
    const row = document.createElement('tr');
    const nameCell = document.createElement('td');
    const marksCell = document.createElement('td');
    const gradeCell = document.createElement('td');

    // 填充内容
    nameCell.textContent = student.name;
    marksCell.textContent = student.marks;
    gradeCell.textContent = calculateGrade(student.marks);

    // 把单元格添加到行，行添加到tbody
    row.appendChild(nameCell);
    row.appendChild(marksCell);
    row.appendChild(gradeCell);
    tableBody.appendChild(row);
});
</script>

内容的提问来源于stack exchange，提问作者Mayra Sharma