模板字符串代码

动态渲染：学生信息表格展示

最新推荐文章于 2023-07-22 16:27:23 发布

原创最新推荐文章于 2023-07-22 16:27:23 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何使用模板字符串将学生信息数组转化为HTML表格，展示了如何遍历数组并将数据插入到table中进行动态呈现。

模板字符串将学生数组动态渲染成表格tabel形式显示到页面

<script>
    var students = [{
            number: 1001,
            name: 'jack',
            score: 98,
            gender: '男'
        },
        {
            number: 1002,
            name: 'rose',
            score: 95,
            gender: '女'
        },
        {
            number: 1003,
            name: '小丽',
            score: 85,
            gender: '女'
        },
    ]
    document.write(`
    <table>
<tr>
    <td>学号</td>
    <td>名字</td>
    <td>成绩</td>
    <td>性别</td>
</tr>

    function hanshu() {

        for (var key in students) {
            document.write(`<tr>
    <td>${students[key].number}</td>
    <td>${students[key].name}</td>
    <td>${students[key].score}</td>
    <td>${students[key].gender}</td>
    
 </tr>`)
        }
        document.write('</table>')
    }
    hanshu()
</script>