字符串拼接问题
来源:4-1 模板字符串
慕尼黑3413982
2022-02-23 20:20:56
问题描述:
老师,为什么我这里字符串拼接报错了,视频里面老师的写法没有报错呢?
相关代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { margin-top: 30px; } thead { height: 40px; line-height: 40px; background-color: #ddd; font-size: 20px; } tbody tr { height: 30px; line-height: 30px; } </style> </head> <body> <table align="center" border="1" width="600" cellspacing="0"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> var userList = [ { id: 1, name: '张三丰', gender: '男', age: 108 }, { id: 2, name: '张无忌', gender: '男', age: 22 }, { id: 3, name: '赵敏', gender: '女', age: 18 }, { id: 4, name: '周芷若', gender: '女', age: 18 }, { id: 5, name: '杨逍', gender: '男', age: 58 }, ] var str = ''; for (var i = 0; i < userList.length; i++) { // console.log(i); // str += "<tr><td>" + userList[i].id + "</td><td>" + userList[i].name + "</td><td>" + userList[i].gender + "</td><td>" + userList[i].age + "</td><td><button class='del'>删除</button></td></tr>"; str+ = ` <tr> <td>${userList[i].id}</td> <td>${userList[i].name}</td> <td>${userList[i].gender}</td> <td>${userList[i].age}</td> <td><button class='del'>删除</button></td> </tr> `; // console.log(str); } var tbody = document.querySelector('tbody'); tbody.innerHTML = str; // 给所有删除按钮上绑定点击事件 var btns = document.querySelectorAll('.del') for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { var result = confirm('您确认删除该用户吗?'); // 找到删除删除按钮对应的 tr 标签 var delTr = this.parentNode.parentNode; if (result) { tbody.removeChild(delTr); } } } </script> </body> </html>
相关截图:
1回答
同学你好,同学上述贴出代码中+号与=号之间有空格,所以会提示异常,这里将空格去掉即可~即:+=
祝学习愉快~
相似问题