javascript - 无法在表中显示数据库中的所有数据

Question

for(var i =0; i< keys.length;i++){
        var k = keys[i];
        resultUserName.innerHTML = `
        <table class="responsive-table highlight">
            <thead>
            <tr>
                <th>Issued Raised By</th>
                <th>Issue For</th>
                <th>Issue Logged Time</th>
                <th>Issue Description</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>${userData[k].raisedBy}</td>
                    <td>${userData[k].issueFor}</td>
                    <td>${userData[k].issueLoggedDate}</td>
                    <td>${userData[k].issueDescription}</td>
                </tr>
            </tbody>
        </table>
        `;
    }

我正在尝试将数据库中的所有数据检索到表中，当我控制台记录它时，它显示所有数据，但是当我在页面上显示它时，它只显示最后一个条目，任何人都可以指出上面的代码有什么问题。

Answer 1

您需要在循环外单独构建 header 元素，并在循环中将每一行数据构建为字符串，最后附加到您的 DOM

var innerHtml = '<table class="responsive-table highlight">'+
        '<thead>'+
        '<tr>'+
            '<th>Issued Raised By</th>'+
            '<th>Issue For</th>'+
            '<th>Issue Logged Time</th>'+
            '<th>Issue Description</th>'+
        '</tr>'+
        '</thead>'+
        '<tbody>';
for(var i =0; i< keys.length;i++){
    var k = keys[i];
    innerHTML += '<tr>'+
                '<td>${userData[k].raisedBy}</td>'+
                '<td>${userData[k].issueFor}</td>'+
                '<td>${userData[k].issueLoggedDate}</td>'+
                '<td>${userData[k].issueDescription}</td>'+
            '</tr>';
}
resultUserName.innerHtml = innerHTML+"</tbody></table>";