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

Question

我最近一直在努力学习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 */

它只是不插入数据。在此先感谢您的帮助

Answer 1

你的代码工作正常，而不是创建一个字符串'<tr><td>${person.name}</td><td>${person.age}</td></tr>'你必须使用Template literals (Template strings)：

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

码：

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

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;
}

loadTableData(personData);

<table id="tableData"></table>

这里使用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>

Answer 2

你可以连接html和参数

dataHtml+= '<tr><td>'+person.name+'</td><td>'+person.age+'</td></tr>';

你可以在下面看到

     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 */

和你的HTML：

    <table id="tableData">

    </table>