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

您可以使用

连接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>

Answer 2

您的代码可以正常工作，只是必须使用Template literals (Template strings)来代替创建字符串'<tr><td>${person.name}</td><td>${person.age}</td></tr>'：

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

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

2 个答案: