模板文字HTML表

Question

I am trying to create a div of tables but stuck with only the first item adding to each table. 我正在尝试创建一个表的div，但仅将第一项添加到每个表中。 I am getting tables with only the first key value pair. 我得到的表只有第一个键值对。 I am mapping through my data array but stuck accessing the keys and values in my tables. 我正在通过数据数组进行映射，但是无法访问表中的键和值。 I feel like I am stuck on the createTableData function. 我感觉自己被卡在createTableData函数上。

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

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

Answer 1

Try this in your createTableData function .. 在您的createTableData函数中尝试此操作。

    function createTableData(dc) {
        var html = ''
        for (key in dc) {
        html += `
        <tr>
            <td> ${key} </td>
            <td> ${dc[key]} </td>
        </tr>            
        `
        }
        return html
    }

模板文字HTML表

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-09-18 23:11:33

模板文字HTML表

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-09-18 23:11:33

解决方案1
1 已采纳 2018-09-18 23:11:33