需用javascript动态计算总分并排序：先将数据存为数组对象，用map添加total字段，再用sort降序，最后用createelement安全插入dom。
用 table 渲染成绩排名表格时，如何让“总分”列自动计算并排序？
浏览器不支持在纯 HTML 中动态计算或排序，table 本身只是结构容器。必须配合 JavaScript 实现总分求和与 DOM 重排。常见错误是直接写死 <td>287</td>，后续改数据就得手动同步——这根本不是“查询页面”，只是静态快照。
实操建议：
- 把原始数据存在 JS 数组里，每项是
{name: "张三", math: 92, english: 85, chinese: 90}这样的对象 - 用
Array.prototype.map()生成带total字段的新数组，再用sort()按total降序排列 - 最后用
innerHTML或document.createElement插入<tr><td>...</td></tr>，避免 innerHTML 拼接字符串时 XSS 风险（尤其姓名含时）
用户输入学号查成绩，为什么 getElementById("stuId").value 总是空？
最常见原因是表单提交触发了页面刷新，JS 还没执行完就跳转了；或者元素还没加载完成就执行了 JS（比如脚本写在 里且没加 defer）。另一个隐蔽坑：input 的 id 和 name 混用，但 getElementById 只认 id 属性，不是 name。
实操建议：
- 给查询按钮加
type="button"，别用默认的submit，彻底避开表单提交刷新 - 把 JS 放在
前，或用DOMContentLoaded包裹逻辑 - 加一行调试：
console.log(document.getElementById("stuId"))，确认元素是否存在、是否拼错 ID - 查不到时别只弹
alert("未找到")，顺便打印document.getElementById("stuId").value.length，看是不是空格或换行符干扰
成绩表格需要导出 Excel，download 属性为什么对 .xlsx 文件无效？
download 属性只对同源的 Blob URL 或 data URL 生效，且仅支持 .csv 这类纯文本格式。直接设 href="report.xlsx" + download 会下载失败或被浏览器拦截——因为服务器没返回正确的 Content-Disposition 头，或跨域了。
实操建议：
- 优先导出为 CSV：用 JS 拼接逗号分隔字符串，转成 Blob，再用
URL.createObjectURL()创建可下载链接 - 真要 XLSX，必须用
xlsx库（如 SheetJS），调用XLSX.write(wb, {type: "blob"})生成 Blob，再触发下载 - 服务端生成 Excel 时，确保响应头包含
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet和Content-Disposition: attachment; filename="scores.xlsx"
在手机上打开成绩页，表格横向滚动卡顿甚至错位，怎么修？
原生 table 在移动端缺乏弹性，尤其是列多时，浏览器会强制缩放或截断内容。用 overflow-x: auto 包裹后，iOS Safari 对 table 的滚动优化很差，容易触发双层滚动条或 touch 事件冲突。
实操建议：
- 给包裹
table的容器加overflow-x: auto，同时设-webkit-overflow-scrolling: touch提升 iOS 流畅度 - 禁用
table的默认缩放：table { width: max-content; min-width: 100%; }，防止被压扁 - 更彻底的解法：放弃
table，用div+display: grid模拟行列，配合@media (max-width: 768px)把“姓名+各科成绩”垂直堆叠，比横向滚动更符合移动端直觉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
