为什么我使用forEach来遍历压入表格内容会报错，而且现在这个只显示标题不显示内容？
来源：2-4 编程练习
Aurora_Meteor
2020-05-07 13:10:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模版字符串</title>
</head>
<body>
<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"]
}]
}
}
// 补充代码
const {
title,
listData
} = tmpl();
let arr = [];
arr.push(`<caption>${title}</caption>`);
for (let i in listData) {
arr.push(
`
<tr>
<td>${listData[i].title}</td>
<td>${listData[i].date[0]}</td>
<td>${listData[i].date[1]}</td>
</tr>
`
);
};
let table = document.createElement('table');
table.innerHTML = arr.join('');
document.body.appendChild(table);
</script>
</body>
</html>
把
for (let i in listData) {
arr.push(
`
<tr>
<td>${listData[i].title}</td>
<td>${listData[i].date[0]}</td>
<td>${listData[i].date[1]}</td>
</tr>
`
);
};
换成
listData.forEach(function({
title,
date
}) {
arr.push(
`
<tr>
<td>${title}</td>
<td>${date[0]}</td>
<td>${date[1]}</td>
</tr>
`
);
});
会报错如下：
而且现在使用for in不报错了但是只能看到标题而且还是竖着的
3回答
-
同学你好，是data数据没有获取到，循环遍历会有问题。
代码中listData与data不一致，所以没有获取到，参考修改：
表格还需要添加边框
效果
自己再测试下，祝学习愉快！
0h020-05-07 -
好帮手慕星星
2020-05-08
同学你好，标签中属性大部分是这样的，只写数字会默认加上px单位，也会默认加上引号
或者自己写的添加加上引号和单位
但是css中不能只写数字，会解析不正确
在练习过程中慢慢总结就好，祝学习愉快！
0 -
好帮手慕星星
2020-05-07
同学你好，问题解答如下：
1、border是table标签的自有属性，所以可以直接设置
忘记了可以回顾一下：
https://class.imooc.com/lesson/744#mid=18326
如果想要使用js设置，属性值不能只能是宽度，还需要有样式和颜色，符合css设置。例如
但是实现效果不一样哦，只有table有边框
所以还是建议使用border属性设置。
2、这边使用Chrome浏览器打开网站，测试在线编辑没有问题
建议重置代码可以再测试下。
祝学习愉快！
0h020-05-07
相似问题