某公司网页前端笔试题一则:显示学生成绩表

最新推荐文章于 2024-04-27 21:37:04 发布

狗仔很忙

最新推荐文章于 2024-04-27 21:37:04 发布

阅读量532

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/u011473324/article/details/108991022

版权

题目如下：有班级同学成绩查询Http Get接口 http://www.testing.com/api/getscore ,返回数据格式如下

{code:1,data:[{ "uid": 1, "name": "程萌", "sid": 2, "subject": "数学", "score": 91.5 },

{ "uid": 1, "name": "程萌", "sid": 3, "subject": "英语", "score": 83.0 },

{ "uid": 2, "name": "李伟", "sid": 3, "subject": "英语", "score": 86.0 },

{ "uid": 2, "name": "李伟", "sid": 2, "subject": "数学", "score": 73.0 },

{ "uid": 1, "name": "程萌", "sid": 1, "subject": "语文", "score": 85.5 }...

]}

请在空白的index.htm 填入代码, 将全班同学成绩以如下表格显示:

学生姓名	语文	数学	英语	总分
程萌	85.5	91.5	83	260
...	...	...	...	...

参考答案: index.htm

<html>
<body>
    <div id="app" />
    <script src="jquery.js" />
    <script>
        var showStu //学生所有成绩数组
        var subject //所有学科名称
        $(document).ready(()=>{getScore()})
        function getScore() {
            $.get("http://www.testing.com/api/getscore",
                function (res) {
                    if (res.code == 1) {
                        makeScore(res.data)
                        makeTable()
                    }
                })
        }
        
        function makeScore(stuScores) {
            let existsId = []
            showStu = []
            subject = []
            stuScores.forEach((s) => {
                if (!subject.find((p) => { return p.id == s.sid })) {
                    let sub = { id: s.sid, name: s.subject }
                    subject.push(sub)
                }
                if (!existsId.includes(s.uid)) {
                    let p = {}
                    p.id = s.uid
                    p.name = s.name
                    p["s" + s.sid] = s.score
                    showStu.push(p)
                    existsId.push(s.uid)
                } else {
                    let p = showStu[existsId.indexOf(s.uid)]
                    p["s" + s.sid] = s.score
                }
            })
            subject.sort((a, b) => { return a.id - b.id })
            showStu.sort((a, b) => { return a.id - b.id })
        }
        
        function makeTable() {
            var tbl = ["<table><tr><th>学生姓名</th>"];
            subject.forEach((s) => { tbl.push("<th>" + s.name + "</th>") })
            tbl.push("<th>总分</th></tr>")
            showStu.forEach((s) => {
                tbl.push("<tr><td>" + s.name + "</td>")
                let total = 0;
                for (let i = 0; i < subject.Length; i++) {
                    total += s["s" + subject[i]]
                    tbl.push("<td>" + s["s" + subject[i]] + "</td>")
                }
                tbl.push("<td>" + total + "</td></tr>")
            })
            tbl.push("</table>")
            $("app").html(tbl.join(''))
        }
    </script>
</body>
</html>

主要是基本的请求获取，数据转换以及显示，主要在数据转换里看看各位的处理效率。由于index.htm是空白自由发挥，也可以用vue进行绑定呈现,看各自的技术熟练度。

几年前在旧公司出了这道笔试题，因为在项目里有用到相似的呈现效果，现在补记之。

狗仔很忙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
某公司网页前端笔试题一则:显示学生成绩表

题目如下：有班级同学成绩查询Http Get接口 http://www.testing.com/api/getscore ,返回数据格式如下{code:1,data:[{"uid":1,"name":"程萌","sid":2,"subject":"数学","score":91.5},{"uid":1,"name":"程萌","sid":3,"subject":"英语","score":83.0},{"uid":2,"name":"李伟","s...
复制链接

扫一扫