javascript - 模板文字 HTML 表格
问题描述
我正在尝试创建一个表的 div,但只坚持添加到每个表的第一个项目。我得到的表只有第一个键值对。我正在通过我的数据数组进行映射,但无法访问表中的键和值。我觉得我被困在 createTableData 函数上。
HTML
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1 class="text-center mb-3">
Active Directory Replication Health
</h1>
</div>
<div id="table"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>
脚本
var data = [
{
"DC": "SV07CTDC1",
"Connectivity": "Passed",
"Advertising": "Failed"
},
{
"DC": "SVGCCTDC1",
"Connectivity": "Passed",
"Advertising": "Failed"
}
];
function createTableData(dc ){
for( key in dc )
return `
<tr>
<td> ${key} </td>
<td> ${dc[key]} </td>
</tr>
`
}
function createTable(dc) {
return `
<div class="col-md-3 col-sm-6 ">
<table class="table table-dark table-striped table-bordered table-hover">
${createTableData(dc)}
</table>
</div>
`
}
document.getElementById("table").innerHTML = `
<div class="row">
${data.map(createTable).join("")}
</div>
`
解决方案
在你的函数中试试这个createTableData
..
function createTableData(dc) {
var html = ''
for (key in dc) {
html += `
<tr>
<td> ${key} </td>
<td> ${dc[key]} </td>
</tr>
`
}
return html
}
推荐阅读
- java - 骆驼文件组件:创建一个文件,如果已经存在,移动它并用时间戳重命名它
- python - Python Pandas:根据布尔熊猫系列过滤数据框
- python-3.x - 如何获取 Tkinter 对象(如标签)的当前网格位置?
- gradle - 将 JaCoCo 配置导出到二进制 gradle 插件
- sql - 如何从两个表的两个不同列中插入一列?
- cognos - 在 Cognos11 中将自定义颜色应用于条形图
- python - 如何使我的 session.get() 链接到变量?
- python - python 2.7中的子测试功能?
- java - 内部路由中的骆驼重试处理
- python - 熊猫如何将函数应用于带有参数的groupby对象