2-4 编程练习代码提交

来源：2-4 编程练习

MiMicccc

2021-08-27 19:47:28

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>模版字符串</title>
</head>

<body>
    <script type="text/javascript">
        const tmpl = function () {
            return {
                title: "前端",
                data: [{
                    title: '布局基础',
                    date: ["html", "css"]
                }, {
                    title: '网页特效',
                    date: ["javascript", "jquery"]
                }, {
                    title: '框架',
                    date: ["bootstrap", "vue"]
                }]
            }
        }
        // 补充代码
        // 第一步：调用函数，解构对应的数据
        const { title, data } = tmpl();

        // // 第二步：定义数组，把解构出来的大标题，压入数组
        let arr = [];
        arr.push(
            `<caption>${title}</caption>`
        )

        // // 第三步：遍历解构的data数据，对应的变量写入td标签中，压入数组
        data.forEach(function ({ title, date }) {
            arr.push(
                `
                <tr>
                    <td>${title}</td>
                    <td>${date[0]}</td>
                    <td>${date[1]}</td>
                </tr>
                `
            )
        });

        // 第四步：创建table节点
        let table = document.createElement('table')
        // 第五步：使用join() 方法用于把数组中的所有元素变成字符串，并该字符串设置为table的内容
        table.innerHTML = arr.join('');

        // 第六步：在页面中显示，并设置边框
        table.border = '1';
        document.body.appendChild(table);

    </script>
</body>

</html>