时间戳

首页 > 解决方案 > 如何使用基本 JavaScript 将数组中的数据插入 HTML

javascript - 如何使用基本 JavaScript 将数组中的数据插入 HTML

问题描述

我最近一直在尝试学习 HTML，但遇到了问题，非常感谢一些帮助。我的代码在下面，但是当我运行它时，它实际上并没有将数据插入表中，而是插入了代码。

我尝试更改代码的顺序并添加；在不同的地方，但不知道足够的 HTML 来解决问题。

let sortDirection = false;
let personData = [
    {name: 'Dylan', age: 31 },
    {name: 'Hannah', age: 17 },
    {name: 'Dollan', age: 39 },
    {name: 'Elle', age: 3 },
];

window.onload = () => {
    loadTableData(personData);
};

loadTableData(personData);

function loadTableData(personData) {
    const tableBody = document.getElementById('tableData');
    let dataHtml = '';

    for(let person of personData){
        dataHtml+= '<tr><td>${person.name}</td><td>${person.age}</td></tr>';
    };
console.log(dataHtml);
tableBody.innerHTML = dataHtml;

} /* The table data is an id I used in the table */

它只是不插入数据。感谢您提前提供任何帮助

标签： javascripthtmldomhtml-table

解决方案

您的代码工作正常，而不是创建一个字符串'<tr><td>${person.name}</td><td>${person.age}</td></tr>'，您必须使用模板文字（模板字符串）：

`<tr><td>${person.name}</td><td>${person.age}</td></tr>`

代码：

使用Array.prototype.reduce()：

const personData = [{name: 'Dylan',age: 31},{name: 'Hannah',age: 17},{name: 'Dollan',age: 39},{name: 'Elle',age: 3}]
const tableBody = document.getElementById('tableData')

tableBody.innerHTML = personData.reduce((a, {name, age}) => 
  a += `<tr><td>${name}</td><td>${age}</td></tr>`, '')
<table id="tableData"></table>

推荐阅读