es6字符串的扩展——模板字符串

ゝ一世哀愁。 2022-05-19 13:16 252阅读 0赞

模板字符串的用法：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>模板字符串</title>
    </head>
    <body>
    <table id="table">
    
    </table>
    </body>
    <script>
    let name = "小美";
    let buffer = `你好${name}`
    console.log(buffer);
    
    </script>
    </html>

使用模板字符串制作表格：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板字符串</title>
    </head>
    <body>
    <table id="table" border="1px"></table>
    
    </body>
    <script>
        var dataList = [
            {id:1,name:"小刚",age:18},
            {id:2,name:"小明",age:17},
            {id:3,name:"小刚",age:18},
            {id:4,name:"小明",age:17},
            {id:5,name:"小刚",age:18},
            {id:6,name:"小明",age:17},
            {id:7,name:"小刚",age:18},
            {id:8,name:"小明",age:17},
            {id:9,name:"小刚",age:18},
            {id:10,name:"小明",age:17},
            {id:11,name:"小刚",age:18},
            {id:12,name:"小明",age:17},
            {id:13,name:"小花",age:19}];
    
        var table = document.getElementById('table');
    
        var data = "<tr><td>编号</td><td>姓名</td><td>年龄</td><td>是否删除</td></tr>";
    
        dataList.forEach(function (person) {
            data = data+`<tr id=tr${person.id}><td>${person.id}</td><td>${person.name}</td><td>${person.age}</td><td><button onclick='deleteTr(${person.id})'>点击删除</button></td></tr>`;
        });
    
        table.innerHTML = data;
    
        function deleteTr(id) {
            //计算当前tr的id号
            var trID=`tr${id}`;
            //获得当前的tr
            var tr = document.getElementById(trID);
            //删除当前的tr
            tr.remove();
        }
    </script>
    </html>

效果图：

![70][]       ![70 1][]

[70]: https://img-blog.csdn.net/20180725193251889?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220519/a761253abfb54fa6b8f641a1d9bcc176.png