模板字符串拼接导入data数据

来源：2-4 编程练习

weixin_慕的地5241954

2019-10-15 16:26:18

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模版字符串</title>
</head>
<style>
    div{
        width: 216px;
    }
    .tit{
        margin: 0;
        text-align: center;
    }
    table{
        border: 1px solid black;
    }
    table td {
        border: 1px solid black;
    }
</style>
<body>
    <!-- <div>
        <p class="tit">前端</p> 
        <table>
            <tr>
                <td>布局基础</td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>biaoti</td>
                <td>javascript</td>
                <td>jquery</td>
            </tr>
            <tr>
                <td>biaoti</td>
                <td>1</td>
                <td>2</td>
            </tr>
        </table> 
    </div> -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
    const tmpl = function() {
        return {
            title: "前端",
            data: [{
                title: '布局基础',
                date: ["html", "css"]
            }, {
                title: '网页特效',
                date: ["javascript", "jquery"]
            }, {
                title: '框架',
                date: ["bootstrap", "vue"]
            }]
        }
    }
    // 补充代码
    let getdata = tmpl();
    // let {title: header, data: [ { title, date:[ td1, td2] } ] } = getdata;
    // console.log(header, title, td1, td2)
    let {title: header, data } = getdata;
    // let [content1, content2, content3] = data;
    // console.log(content1.date[1])
    let arr = [];
    let str = `<p class="tit">${header}</p><table>`;
    for(let k in data){
        // console.log(data[k].date[1])
        str += `<tr>
                <td>${data[k].title}</td>
                <td>${data[k].date[0]}</td>
                <td>${data[k].date[1]}</td>
                </tr>`
        // console.log(str)
    }
    // let ele = document.createElement('table');
    // console.log(typeof ele)
    str = str + '</table>';
    arr.push(str);

    let ele = document.createElement('div');

    ele.innerHTML = (arr.join(''));
    document.body.appendChild(ele);
    
    </script>
</body>
</html>

检查一下代码，麻烦再优化一下代码。

我这种方式和要求的方式不一样，用要求的方式不知道样式该怎么设置，想问一下这两种哪种方式好一点？

写回答

3回答