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

模板字符串的用法：

<!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>

效果图：

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

猜你喜欢